关于 javascript:Google 图表 – 直方图：数据旁边出现额外的条形图

Google charts - histogram: extra bars appearing alongside data

我在 JavaScript 中使用 Google 的直方图功能来绘制随机模型的输出，它在原本不错的图表上覆盖了额外的条形图。

图表是通过使用不同的输入运行 calculate_display_coverage() 函数数百次而生成的。我向您保证，函数的内部工作在这里不是问题(我不能真正发布我的整个 Fiddle，但我会在我的代码片段中展示数据的样子)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

gender = {
gender1:"Male",
gender2:"Female"
};
device = {
device1:"Tablet",
device2:"Mobile",
device3:"Desktop"
};
var paramstring ="";

resultArray = [];
resultArray[0] = ['Run','Coverage'];
var q = 1;

for (var x = 0; x < 100; x++) {
for (var y in gender) {
for (var w in device) {
for (var z = 1950; z < 1980; z++) {
paramstring ="09/21/";
paramstring += z.toString();
resultArray[q] = [q,calculate_display_coverage('SIW', y, paramstring, w).displayed];
q++
}
}
}
}

// dataset looks like [['Run','Coverage'],[1,80000],[2,42000],...]

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(resultArray);

var options = {
title: 'Model output by coverage',
legend: { position: 'none' },
};

var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}

使用 HTML：

1
2
3
4
5
6

在这种情况下，其中 x = 100，直方图包括这些额外的条形 extra

格式稍有不同，但对于更多运行，问题相同，其中 x = 2000.

extra

有人见过这个吗？

问题是您的数据的两列都是数字。目前它的格式为

1	[['Run','Count'],[1,80000],[2,42000],...]

所以直方图包含索引值作为数据点。您需要将它们转换为字符串，因此在上面的代码中，语句应该是

1 2	resultArray[q] = [q.toString(),calculate_display_coverage('SIW', y, paramstring, w).displayed]; // [['Run','Count'],['1',80000],['2',42000],...]

这将删除多余的条。