谷歌图表，设置条形图的网格线数

Question

目前我正在使用 Google Charts API 来生成一些图表。要显示正确的图像，我应该更改标有绿色网格线的 X 轴（值）的网格线步长。

当前图表

_{（来源：jordysipkema.nl）}

预期图表

_{（来源：jordysipkema.nl）}

（通过调整浏览器大小制作的预期图表）

设置数据

var data = new google.visualization.DataTable();
data.addColumn('string', 'Labels');
data.addColumn('number', 'Result value');
data.addRows([
    ["Label 1", 8.098205131],
    ["Label 2", 10.08567831],
    ["Label 3", 10.790166352],
    ["Label 4", 9.148802676],
    ["Label 5", 8.571340962]
]);

定义图表选项

var options = {        
    title: 'Title - Value Bar Chart',
    subtitle: 'Uses: label and a value',
    legend: {
        position: 'none'
    },
    height: chartHeight,
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: {
        format: '#.###',
        gridlines: {
            color: '#00ff00' //Green lines for debugging purposes 
            // count: 4
        },
        ticks: [8, 9, 10, 11],
        viewWindow: {
            min: Math.floor(columnRange.min),
            max: Math.ceil(columnRange.max)
        }
    },
    vAxis: {
        gridlines: {
        color: '#ff0000', //Red lines
            count: 1
        }
    }
};

我已经阅读了 options 数组中的 hAxis.gridlines.count 参数。不幸的是，这不会改变图表的任何内容。在这个给定的情况下，值范围从 8 到 11，我希望有 4 条网格线（设置为 8、9、10 和 11）。

我尝试过的另一种方法是将hAxis.ticks 参数设置为[8, 9, 10, 11]。这也不会影响图表。

一个有效的 JSFiddle 示例来演示正在发生的事情： JSFiddle of the code

任何帮助将不胜感激

Answer 1

我设法获得预期结果的唯一方法是将宽度限制为 600 像素：

var options = {
    title: 'Title - Value Bar Chart',
    subtitle: 'Uses: label and a value',
    legend: {
        position: 'none'
    },
    width: 600,
    height: chartHeight,
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: {
        format: '#.###',
        gridlines: {
            color: '#00ff00' //Green lines for debugging purposes
        },
        viewWindow: {
            min: Math.floor(columnRange.min),
            max: Math.ceil(columnRange.max)
        }
    },
    vAxis: {
        gridlines: {
            color: '#ff0000', //Red lines
            count: 1
        }
    }
};

https://jsfiddle.net/qLpwrtmw/