更改 Material google 条形图中的 x 轴刻度

Question

我正在尝试使用 https://developers.google.com/chart/interactive/docs/gallery/barchart#top-x 构建使用条形图。我想知道如何最大化 X 轴刻度线的范围？我试过在 fiddle https://jsfiddle.net/gbta075L/ using the suggestion from another post - set x Axis range in google chart 中这样做，但是没有用。这是我添加到现有 fiddle:

hAxis: {
        viewWindow: {
              max: 200
        },
        ticks: [0,50,100]
}

但这似乎不起作用。任何帮助将不胜感激！

Answer 1

老实说，我不知道如何在使用 googles material 条形图时构建 ticks 和 viewWindow 等价关系。它没有很好的文档记录，仍处于测试阶段。

但是，一个不错的技巧是使用 google.charts.Bar.convertOptions() 将 google 可视化选项转换为 material 图表选项：

var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));

结果

我想这就是你想要的。
分叉 fiddle -> https://jsfiddle.net/65bwmknu/

Changing x axis ticks in Material google bar charts