使用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});
}
有没有办法让“比如说星期二”变得更好。烛台红色,同时保持其余的蓝色/白色?
答案 0 :(得分:3)
似乎没有设置图表选项。
一种可能性是根据您的数据构建两个系列,并为每个系列设置不同的颜色。必须更改输入数据。 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,则找不到任何内容。