Google可视化 - 列图间隔问题（重复间隔）

问题描述

m使用以下代码生成上面的google图表：

  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％'，
高度：'100％'，
颜色：[＃27ae60，＃2980b9，＃e67e22，＃e74c3c，＃e74c3c]，
 chartArea：{left：' 8％'，顶部：'8％'，宽度：85％，高度：70％}，
 
 vAxis：{
 minValue：1，
格式：'＃'
}，
 
 google.visualization.ColumnChart（document.getElementById（'ticket-history-graph'））。 
 draw（data，columnChartOptions）; 
  

然而，它会产生以下错误的间隔计数：

我需要对vAxis定义进行哪些更改才能解决此问题？我试过不同的最小值和最大值都无济于事。我还必须补充说，当使用更高的数字时，这不是问题，只有更小的计数。

您的问题是格式：'＃'，这就是你得到两个零和三个零的原因（当你舍入到零小数，并且图表试图呈现值[0 ，0.25,0.5,0.75,1]，它们被舍入为[0,0,1,1,1]，因此重复它们）。

我的建议是你请查看属性vAxis.gridlines.count 。

我做了一个小提琴，我检查图中的maxValue是否为1或2，如果是这样，我指定网格线为2或3的计数，如果它是无论是1还是2，它都使用Google自动生成。
检查并查看您是否按照我所做的操作：

请记住尝试将某些值更改为更高/更低值以查看其工作原理。

  //获取所有不同的票务信息，按默认顺序排序，所以你必须得到最后一个值才能得到最高值。 
 var maxValue = data.getDistinctValues（1）[data.getDistinctValues（1）.length  -  1] 
 
 //指定gridCount为null，如果它没有输入任何如果在下面，它仍然是空的
 var gridCount = null 
 
 //检查最高值是1还是2否则将gridCount保留为空
 if（maxValue == 1 ）{
 gridCount = 2 
} 
 if（maxValue == 2）{
 gridCount = 3 
} 
  

以及columnChartOptions的添加：

  vAxis ：{
 gridlines：{
 //指定var gridCount的网格线数量，如果它仍然指定为null，它将使用Google自动生成。 
 count：gridCount 
}，
  

I'm using the following code to generate the above google chart:

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);

However it produces the following wrong interval counts:

What changes do I need to make to the vAxis definition to correct this? I've tried varying min and max values to no avail. I must also add that when higher numbers are used this is not a problem, it's only with lower counts.

解决方案

Your problem is the format:'#', which is the reason why you get two zeros and three ones (as you round to zero decimals, and the graph tries to present the values [0, 0.25, 0.5, 0.75, 1] which are rounded to [0, 0, 1, 1, 1], therefore duplicates them).

My suggestion is that you check out the property vAxis.gridlines.count documentation.

I made a fiddle, where I check if the maxValue in the graph is 1 or 2, if so I specify the gridlines to either the count of 2 or 3, and if it's neither 1 or 2, it uses googles own automatic generation.Check and see if you follow how I've done: jsfiddle
Remember to try and change some values to higher/lower to see how it works.

//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
    }

Aswell as the addition to the 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
            },

这篇关于Google可视化 - 列图间隔问题（重复间隔）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！