javascript - Google 图表中 X 轴避免使用小数点

Question

我正在使用 Google 图表，并创建了一个水平堆叠图表。我用于绘制图表的数组是

[['name','count',{ role: "style" }],
['abc', 1, '#4CAF50'],
['pqr', 2, '#4CAF50'],
['xyz', 1, '#4CAF50'],
['efg', 1, '#4CAF50'],
['klm', 2, '#4CAF50']]

这导致X轴点0.5、1.0、1.5、2.0。

但我想避免 X 轴上的小数点。

为此我尝试过:

hAxis: {
          format: '#'
        }

并且

hAxis: {
          format: '0'
        }

但这些给出的 X 轴 为:1, 1, 2, 2。 这是不可取的。

我想要 X 轴 点类似于:1, 2, 3, 4

我该怎么做？任何帮助都非常感激......

Answer 1

您可以通过 ticks 选项显式指定 X 轴。但由于您的目标是根据输入数据设置刻度，因此您可以指定它，如下所示:

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sold Books (M)', { role: 'annotation' }],
        ['2010', 1.1, ''],
        ['2011', 3.0, ''],
        ['2012', 9.0, ''],
        ['2013', 7.3, ''],
        ['2014', 3.5, '']
    ]);




    var options = {
        width: 600,
        height: 400,
        legend: { position: "none" },
        isStacked: true,
        hAxis: {
            ticks: calcIntTicks(data,1)
        }
    };
    var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
    chart.draw(data, options);
}

function calcIntTicks(dataTable,step) {
    var min = Math.floor(dataTable.getColumnRange(1).min);
    var max = Math.ceil(dataTable.getColumnRange(1).max);
    var vals = [];
    for (var cur = min; cur <= max; cur+=step) {
        vals.push(cur);
    }
    return vals;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>