javascript - Google AreaChart 不显示垂直网格线。

Question

首先，我检查了这些：

• 如何让 Google Visulization LineChart 显示垂直网格线？
• 谷歌图表：AreaChart vAxis Gridlines 未绘制

而且它们似乎不是我正在寻找的东西，所以希望这不是一个重复的问题。

我无法将网格线添加到 Google AreaChart 垂直轴。我用过：

 vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }

但它似乎不起作用，当我更改 vAxis Count 的值时：它会在 hAxis 中添加行:(

见：http: //jsfiddle.net/j29Pt/2/

谁能解决这个问题？

提前致谢 ：）

Answer 1

您需要将 x 轴更改为连续数据类型（数字、日期、日期时间、时间）以获取垂直线。该hAxis.gridlines.count选项控制您获得多少垂直网格线。 vAxis.gridlines.count控制你得到多少水平线。

在您的示例中，您可以将 DataTable 更改为：

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', ],
    [2004, 1000],
    [2005, 1170],
    [2006, 660],
    [2007, 1030]
]);

以及您对此的选择：

var options = {
    title: '',
    hAxis: {
        title: 'Year',
        titleTextStyle: {
            color: '#333'
        },
        gridlines: {
            color: '#f3f3f3',
            count: 4
        },
        format: '####'
    },
    vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }
};

见例子：http: //jsfiddle.net/asgallant/j29Pt/3/