javascript - 在 Material 谷歌条形图中更改 x 轴刻度

Question

我正在尝试使用 https://developers.google.com/chart/interactive/docs/gallery/barchart#top-x 构建使用条形图. 我想知道如何最大化 X 轴刻度线的范围？我试过在 fiddle 中这样做 https://jsfiddle.net/gbta075L/使用另一篇文章的建议 - 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));

结果

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