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

Question

首先，我检查了这些:

• How can I get a Google Visulization LineChart to display vertical gridlines?
• Google Chart: AreaChart vAxis Gridlines is Not Drawing

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

我在向 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/