谷歌圖表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>