Google Chart API - 某些燭臺的顏色不同

Question

使用Google Charts API時，有某種方法可以使某些燭臺呈現不同的顏色嗎？

例如，看看以下（編輯）陰陽燭圖：

https://code.google.com/apis/ajax/playground/?type=visualization#candlestick_chart

function drawVisualization() { 
    // Populate the data table. 
    var dataTable = 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); 

    // Draw the chart. 
    var chart = new google.visualization.CandlestickChart(document.getElementById('visualization')); 
    chart.draw(dataTable, {legend:'none', width:600, height:400}); 
} 

有沒有辦法讓，比方說，只是「星期二」陰陽燭紅，同時保持其餘的藍/白？

Answer 1

似乎沒有圖表選項來設置它。

一種可能性是從您的數據中構建兩個系列，併爲每個系列設置不同的顏色。輸入數據必須改變。 Tue數據被移動到第二系列中，所有其他值是零：

var data = google.visualization.arrayToDataTable([ 
     ['Mon', 20, 28, 38, 45, 0, 0, 0, 0], 
     ['Tue', 0, 0, 0, 0, 31, 38, 55, 66,], 
     ['Wed', 50, 55, 77, 80, 0, 0, 0, 0], 
     ['Thu', 77, 77, 66, 50, 0, 0, 0, 0], 
     ['Fri', 68, 66, 22, 15, 0, 0, 0, 0] 
     // Treat first row as data as well. 
    ], true); 

    var options = { 
     legend: 'none', 
     bar: { 
      groupWidth: 100 
     }, 
     series: { 
      0: {color: '#4682B4'}, 
      1: {color: '#FF8C00'} 
     } 
    }; 

example at jsbin見。不是很漂亮，因爲第二個系列有一個偏移量。

另一種可能性是更改SVG元素屬性值。每個燭臺是建立使用類似：

<g> 
<rect x="235" y="279" width="2" height="115" stroke="none" stroke-width="0" fill="#4682b4"></rect> 
<rect x="213" y="312" width="47" height="44" stroke="#4682b4" stroke-width="2" fill="#4682b4"></rect> 
</g> 

所以，你必須過濾掉<rect>元素和改變fill屬性，你希望有不同的顏色之一。

更新：可以做，例如使用方法querySelectorAll()和setAttribute()：

var cSticks = document.querySelectorAll('rect[fill="#4682b4"]'); 

    cSticks[2].setAttribute('fill', '#ff8c00'); 
    cSticks[3].setAttribute('fill', '#ff8c00'); 
    cSticks[3].setAttribute('stroke', '#ff8c00'); 

查看更新example at jsbin用硬編碼的數據。

注意：填充顏色值是小寫，因此如果您搜索4682B4，則不會發現任何內容。