javascript - Google Visualization - 柱形图间隔问题(重复间隔)

Question

我正在使用以下代码生成上面的谷歌图表:

var data = google.visualization.arrayToDataTable([
['Date', 'Tickets'],
['11/05/15',1],
['10/05/15',0],
['09/05/15',0],
['08/05/15',0],
['07/05/15',0],
['06/05/15',0],
['05/05/15',0],
['04/05/15',0],
]);

var columnChartOptions = {
title: "",
legend: { position: 'none' },
width: '100%',
height: '100%',
colors: ["#27ae60", "#2980b9", "#e67e22", "#e74c3c", "#e74c3c"],
chartArea: { left: '8%', top: '8%', width: "85%", height: "70%" },

vAxis: {
minValue: 1,
format:'#'
},

new google.visualization.ColumnChart(document.getElementById('ticket-history-graph')).
draw(data,columnChartOptions);

但是它会产生以下错误的间隔计数:

我需要对 vAxis 定义进行哪些更改才能更正此问题？我试过改变最小值和最大值但无济于事。我还必须补充一点，当使用更高的数字时，这不是问题，只是使用更少的数字。

Answer 1

你的问题是 format:'#'，这就是你得到两个零和三个一的原因(当你四舍五入到零小数时，图表试图呈现值 [0 , 0.25, 0.5, 0.75, 1] 四舍五入为 [0, 0, 1, 1, 1]，因此重复它们)。

我的建议是您检查属性 vAxis.gridlines.count documentation .

我做了一个 fiddle ，我检查图表中的最大值是 1 还是 2，如果是，我将网格线指定为 2 或 3，如果它既不是 1 也不是 2，它使用谷歌自己的自动一代。检查并查看您是否遵循我的操作:jsfiddle
请记住尝试将某些值更改为更高/更低以查看其工作原理。

//Get all distinct ticketsales, sorted ascending by default, so you have to get the last value to get the highest one.
    var maxValue = data.getDistinctValues(1)[data.getDistinctValues(1).length - 1]

    // Specify gridCount to null, so if it doesn't enter any of the if's below, it will still be null
    var gridCount = null

    //check if the highest value is 1 or 2 else leave gridCount to null
    if (maxValue == 1) {
        gridCount = 2
    }
    if (maxValue == 2) {
        gridCount = 3
    }

以及对 columnChartOptions 的补充:

 vAxis: {
            gridlines: {
                //specify the amount of gridlines to var gridCount, if it's still specified as null, it will use googles automatic generation.
                count: gridCount
            },