google charts vAxis ticks multiple colors

问题

i achieved the color using

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"
                    }
                }

How to place multiple colors in the grid lines, i need a,b and c different colors,

Thanks in advance

回答1:

there are no standard options that could be set

but you could change the colors manually,
when the chart's 'ready' event fires

the gridlines will be <rect> elements, with height="1"

see following working snippet...

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>

来源：https://stackoverflow.com/questions/42024643/google-charts-vaxis-ticks-multiple-colors