删除Google Charts API中的所有网格线

时间:2018-08-16 12:47:45

标签: javascript charts google-visualization

我正在使用Google Charts API创建阶梯状面积图,我想删除图表中的所有水平线。我已经看过所有有关这些选项的文档,但是看不到任何删除选项的方法。是否有某种方法可以诱骗API删除它们,或者我坚持使用它们?我正在谈论的行在下面的图片中,只是为了消除可能的混乱。

enter image description here

2 个答案:

答案 0 :(得分:1)

您可以使用以下选项...

vAxis: {
  gridlines: {
    count: 0
  }
}

请参阅以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
    ['Alfred Hitchcock (1935)', 8.4,         7.9],
    ['Ralph Thomas (1959)',     6.9,         6.5],
    ['Don Sharp (1978)',        6.5,         6.4],
    ['James Hawes (2008)',      4.4,         6.2]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      gridlines: {
        count: 0
      }
    }
  };

  var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

答案 1 :(得分:0)

+---------+----------+---------+ | ID | stat | Opt | +---------+----------+---------+ | 1 | Assigned | Done | +---------+----------+---------+ | 2 | Declined | Done | +---------+----------+---------+ 设置为透明。您可以在文档的Configuration Options部分中看到更多选项。

使用(使用docs中的示例):

vAxis.gridlines.color
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
    ['Alfred Hitchcock (1935)', 8.4, 7.9],
    ['Ralph Thomas (1959)', 6.9, 6.5],
    ['Don Sharp (1978)', 6.5, 6.4],
    ['James Hawes (2008)', 4.4, 6.2]
  ]);

  var options = {
    title: 'The decline of \'The 39 Steps\'',
    vAxis: {
      title: 'Accumulated Rating',
      gridlines: {
        color: 'transparent'
      }
    },
    isStacked: true
  };

  var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}