javascript - Google AreaChart not displaying Vertical Gridlines. - Stack Overflow

admin管理员组

文章数量:1326112

Firstly, I have checked these out:

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

And they don't seem to be quite what I'm looking for so hopefully this isn't a duplicated question.

I am having trouble adding gridlines to a Google AreaChart vertical axis. I have used:

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

But it doesnt seem to be working, When I change the value of vAxis Count: It adds lines to the hAxis :(

see : /

Can anyone solve this?

Thanks in advance :)

Firstly, I have checked these out:

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

And they don't seem to be quite what I'm looking for so hopefully this isn't a duplicated question.

I am having trouble adding gridlines to a Google AreaChart vertical axis. I have used:

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

But it doesnt seem to be working, When I change the value of vAxis Count: It adds lines to the hAxis :(

see : http://jsfiddle/j29Pt/2/

Can anyone solve this?

Thanks in advance :)

• javascript
• google-visualization

Share Improve this question Follow edited May 23, 2017 at 11:59 CommunityBot 111 silver badge asked Nov 8, 2013 at 13:27 MarkPMarkP 2,56655 gold badges3232 silver badges4848 bronze badges 1

• As I understand it vAxis is for vertical axis and vAxis.gridlines is for horizontal lines. It seems that you have problem with hAxis.gridlines. This link says that: "This option is only supported for a continuous axis." So, you have to figure it out how to do that. – Anto Jurković Commented Nov 8, 2013 at 16:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to change your x-axis to a continuous data type (number, date, datetime, timeofday) to get the vertical lines. the hAxis.gridlines.count option controls how many vertical gridlines you get. vAxis.gridlines.count controls how many horizontal lines you get.

In your example, you could change you DataTable to this:

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

and your options to this:

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

see example: http://jsfiddle/asgallant/j29Pt/3/

本文标签： javascriptGoogle AreaChart not displaying Vertical GridlinesStack Overflow