最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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 :)

Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Nov 8, 2013 at 13:27 MarkPMarkP 2,5665 gold badges32 silver badges48 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

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/

发布评论

评论列表(0)

  1. 暂无评论