谷歌图表，设置网格线计数

Question

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

当前图表

Image of the current graph http://jordysipkema.nl/images/so-img1.png

预期图表

Image of the expected graph http://jordysipkema.nl/images/so-img2.png

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

设置数据

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

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

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/