谷歌圖表燭台顏色

Question

我正在嘗試從谷歌圖表自定義燭台圖。

我已經找到了如何改變蠟燭本身的顏色，但不是指示最高和最低值的線之一：

這些是我提供的選項：

    let options = {
      legend: 'none',
      candlestick: {
        risingColor: {stroke: '#4CAF50', fill: 'white'},
        fallingColor: {stroke: '#F44336'}
      }
    }

你可以在這個 jsFiddle 上試試： https ://jsfiddle.net/El_Matella/h5p36t3w/2/

我在文檔中找不到如何更改它，有人有想法嗎？ （ https://developers.google.com/chart/interactive/docs/gallery/candlestickchart ）

Answer 1

如果您希望所有線條的顏色相同，
您可以使用colors選項...

請參閱以下工作片段...

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true); var options = { legend:'none', candlestick: { risingColor: {stroke: '#4CAF50', fill: 'white'}, fallingColor: {stroke: '#F44336'} }, colors: ['magenta'] }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 2

由於我將 jQuery 用於其他東西，但仍然沒有來自 Google 的官方解決方案（afaik），我最終得到了這個：

jQuery('div[id*="chart_div"] svg g g[clip-path] g:nth-of-type(3) g' ).each(function() {
    jQuery(this).find('rect:first-of-type').attr('fill',jQuery(this).find('rect:nth-of-type(2)').attr('fill'));
});

（請注意官方示例只有一個圖表，我的頁面有幾個，因此每個都有一個唯一的 id，比如 chart_div_uniqueid，所以所有東西都被包裹在一個 .each 中。）