Question

我在JavaScript中使用Google的histogram功能来绘制随机模型的输出图，并且它在一个不错的图表上叠加额外的条形图。

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

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：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>

在这种情况下，x = 100，直方图包括这些额外的条 extra bars shown in 100 meta-run chart

有些不同的格式，但更多次运行的问题相同，其中x = 2000。

extra bars shown in 100 meta-run chart

之前有人见过吗？

Answer 1

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

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

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

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

这将删除额外的酒吧。

Google图表 - 直方图：与数据

1 个答案: