javascript - 谷歌图表 vAxis 勾选多种颜色

Question

我用

实现了颜色

vAxis: {
                    title: 'Rating (scale of 1-10)'
                    , ticks: [{
                        v: 8.5
                        , f: 'A'
                    }, {
                        v: 4.5
                        , f: 'B'
                    }, {
                        v: 2
                        , f: 'C'
                    }]
                    , gridlines: {
                        color: "#00FF00"
                    }
                }

如何在网格线中放置多种颜色，我需要a,b,c不同的颜色，

提前致谢

Answer 1

没有可以设置的标准选项

但您可以手动更改颜色，
当图表的 'ready'事件触发

网格线将是 <rect>元素，带有 height="1"

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

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');
  data.addRows([
    [{v: [8, 0, 0], f: '8 am'}, 1],
    [{v: [9, 0, 0], f: '9 am'}, 2],
    [{v: [10, 0, 0], f:'10 am'}, 3],
    [{v: [11, 0, 0], f: '11 am'}, 4],
    [{v: [12, 0, 0], f: '12 pm'}, 5],
    [{v: [13, 0, 0], f: '1 pm'}, 6],
    [{v: [14, 0, 0], f: '2 pm'}, 7],
    [{v: [15, 0, 0], f: '3 pm'}, 8],
    [{v: [16, 0, 0], f: '4 pm'}, 9],
    [{v: [17, 0, 0], f: '5 pm'}, 10],
  ]);

  var options = {
    title: 'Motivation Level Throughout the Day',
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)',
      ticks: [
        {v: 8.5, f: 'A'},
        {v: 4.5, f: 'B'},
        {v: 2, f: 'C'}
      ]
    }
  };

  var gridlines = [
    '#ff0000',
    '#00ff00',
    '#0000ff'
  ];

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    var gridlineIndex = 0;
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect, index) {
      if (rect.getAttribute('height') === '1') {
        rect.setAttribute('fill', gridlines[gridlineIndex]);
        gridlineIndex++;
      }
    });
  });
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>