Google графики 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" 
        } 
       } 

Как разместить несколько цветов в линиях сетки, мне нужно, б и различные цвета,

Заранее спасибо

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>