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

Question

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

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

这导致 X-axis 分 0.5, 1.0, 1.5, 2.0.

可是我want to avoid the decimal points in X-axis.

为此我尝试了：

hAxis: {
          format: '#'
        }

和

hAxis: {
          format: '0'
        }

但是这些给出了 X-axis 作为：1, 1, 2, 2. 这是不可取的。

我想要 X-axis 类似的点：1, 2, 3, 4

我该怎么做？任何帮助都非常宝贵...

Answer 1

试试 ticks 选项。 Here 是它的 fiddle。

ticks: [1, 2, 3]

Answer 2

您可以通过 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>

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

Avoid decimal points in X-axis in Google charts

javascript

decimal

google-visualization