javascript - 如何使 vAxis 和 hAxis 编号为整数

Question

这是我的代码:

 var rawdata='".$performances."';
            var mydata=jQuery.parseJSON(rawdata);
            if(mydata){
                var realData=[];
                realData=[
                      ['Activities', 'Performance'],
                    ];

            for (x in mydata)
            {
                var a=parseFloat(mydata[x]['activities']);
                var b=parseFloat(mydata[x]['performance']);
                realData[x]=[a,b];
            }
            var data = google.visualization.arrayToDataTable(realData);
            var options = {
              title: 'Overall Performance',
              legend: { position: 'top', maxLines: 3 },
              hAxis: {title: 'Activities'},
              vAxis: {title: 'Performance'} 
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div_line'));
            chart.draw(data, options);

输出是:

我想将当前的x轴值更改为整数:1,2,3,4,....，我该怎么做？

提前致谢。

Answer 1

您可以采取几种不同的方法来解决此问题。第一个是设置轴范围和网格线数量，使图表默认显示整数值，例如:

vAxis: {
    viewWindow: {
        min: 0,
        max: 2
    },
    gridlines: {
        count: 3
    }
}

通常，如果 min 和 max 是整数，并且 (max - min)/(count - 1) 是整数，则网格线(以及轴标签)将落在整数值上。当您知道图表的有效值范围时，此方法最适用于 y 轴；您也可以将它用于 x 轴，但我不认为它经常使用。

另一种方法是使用h/vAxis.ticks选项来指定网格线和标签的位置。 ticks 选项采用值或对象数组。值指定网格线的位置。对象具有 v 和 f 属性； v 属性指定网格线的位置，f 属性指定要使用的标签。任何没有指定 f 属性的值或对象都将根据 axis format 选项生成轴标签。

hAxis: {
    ticks: [1, 2, 3, 4]
}

或者:

hAxis: {
    ticks: [{v: 1, f: 'one'}, {v: 2, f: 'two'}, {v: 3, f: 'three'}, {v: 4, f: 'four'}]
}

您可以根据需要混合和匹配数组中的对象和值。这种方法对于 x 轴和 y 轴同样有效。

您可以对一个轴采取一种方法，对另一个轴采取另一种方法，但如果您在同一轴上混合使用它们，请注意 ticks 选项会覆盖 gridlines.count ，如果您将刻度线放置在 viewWindow 设置范围之外，您将看不到它。