如何从使用 Google Charts 生成的组合图表中删除网格线答案

【问题标题】：How to remove gridlines from combo chart generated using Google Charts如何从使用 Google Charts 生成的组合图表中删除网格线
【发布时间】：2016-04-20 22:20:57
【问题描述】：

我有以下代码生成我使用 Javascript 代码生成的组合图表：

<script type="text/javascript">
  google.setOnLoadCallback(drawVisualization);


  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
     ['Days', 'Seat Utilization', 'RevPash'],
     ['Monday',  .61,      34.33],
     ['Tuesday',  .59,      33.15],
     ['Wednesday',  .64,      34.83],
     ['Thursday',  .62,      32.85],
     ['Friday',  .73,      37.30],
     ['Saturday',  .89,      49.76],
     ['Sunday',  .87,      45.99]
  ]);
        var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                            { //calc: "stringify",
                                sourceColumn: 1,
                                type: "number",
                                role: "annotation" },2]);
var options = {
  title : '',
  vAxes: {0: {title: "",titleTextStyle: {italic: false},gridlines: { color: 'transparent'}}, 1: {title: "",titleTextStyle: {italic: false},format: 'percent'},gridlines: { color: 'transparent'} },
  hAxis: {title: 'Days',titleTextStyle: {italic: false},gridlines: { color: 'transparent'},textStyle : {fontSize: 9 } },
  chartArea: {'width': '90%', 'height': '80%'},
  seriesType: 'bars',
  series: {1: {type: 'area'}},
  legend: { position: 'top' },
  height: 300,

  series: {
        1:{ type: "area", targetAxisIndex: 0, color:'#EA922B' },
        0:{ type: "bars", targetAxisIndex: 1, color:'#20488D' },
        2:{ type: "bars", targetAxisIndex: 1, color:'#94CAFC' },


    }
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_combo'));
chart.draw(view, options);
 }
</script>

图表如下所示：

我应该怎么做才能删除网格线？我已经尝试过使网格线透明的选项，但由于某种原因它不起作用。我无法理解如何删除网格线。请帮忙

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

问题是 vAxes 1 上 gridlines 的定义中的拼写错误...

gridlines: {color: 'transparent'}
在对象花括号外定义

从...更改...
vAxes: {0: {title: "",titleTextStyle: {italic: false},gridlines: { color: 'transparent'}}, 1: {title: "",titleTextStyle: {italic: false},format: 'percent'},gridlines: { color: 'transparent'} }

到...
vAxes: {0: {title: "",titleTextStyle: {italic: false},gridlines: { color: 'transparent'}}, 1: {title: "",titleTextStyle: {italic: false},format: 'percent',gridlines: { color: 'transparent'}} }

【讨论】：

【解决方案2】：

vAxis: { gridlines: {color: 'none'} }

[编辑] 在这个谷歌文档开发者维基链接的小提琴中工作：https://developers.google.com/chart/interactive/docs/datesandtimes#formatting-axis-gridline-and-tick-labels

【讨论】：

不，这对我不起作用:(此外，小提琴链接将我重定向到一个空的小提琴。还有其他方法吗？
我已经更新了我的答案以提供正确的链接，您可以在其中找到小提琴。您指的是hAxes（复数）但vAxis（单数）是否重要？这有效吗？