[英]Highcharts bubble chart with updating default colors
Highcharts庫具有默認的顏色數組:
http://api.highcharts.com/highcharts/colors
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
您可以在“初始化”中將其設置為所需的任何值。
我的問題:“初始化后”,如何更新顏色陣列並“重繪”圖表?
對於單個系列,我發現我可以通過一些復雜的操作來更新顏色...
chart.series[0].update({
color: {
radialGradient: { cx: .5, cy: .6, r: .25 },
stops: [
[0, '#ffffff'],
[1, '#73ff96']
]
}
}, true);
但是氣泡圖有一個“默認”邊框和“填充”,我似乎無法復制。
http://www.highcharts.com/docs/chart-design-and-style/colors
因此,基本問題可能是:氣泡圖在內部與“顏色”數組一起使用以構建特定系列“顏色”屬性的默認填充/不透明度設置是什么? 什么是“顏色”屬性?
澄清如下:基於@morganfree答案。 應用於單點,系列信息就正確了。
在下面,//取消選擇將恢復為正確的顏色,但是當應用於單個點時,顏色變為帶有參量的灰色,而不是此紅色的“突出顯示”
// unselect points
var points = chart.getSelectedPoints();
if (points.length > 0) {
Highcharts.each(points, function (point) {
point.select(false);
point.update({color: '#7cb5ec'}); // default color
});
}
// select current point
if(idx != -1)
{
chart.series[0].data[idx].select(true);
chart.series[0].data[idx].update({color: '#f45b5b'},true); // highlight color
}
http://fiddle.jshell.net/mshaffer/h39e2z0o/
請注意,select元素會變灰,我相信其中的默認參數
plotOptions: {
series: {
allowPointSelect: true
},
為“標記”
http://api.highcharts.com/highcharts/plotOptions.series.marker
“標記”是否允許這種動態重新着色?
還要注意,如果我對元素進行隨機化,然后更改系列顏色,則系列中的“隨機化”元素不會變回正確的顏色。
看來plotOptions中的“氣泡”和“系列”事件發生沖突? 點擊還是選擇?
如果要在初始化后更改系列的顏色,則必須遍歷系列並更新其顏色-顏色的默認“感覺”將被保留。
chart.series.forEach(function (series, i) {
series.update({
color: colors[colors.length - i - 1]
}, false, false);
});
chart.redraw();
例如: http : //fiddle.jshell.net/mp27yb75/2/
特定氣泡的顏色是從系列顏色繼承的,但是,如果您為該點指定顏色,則將再次保留默認的“感覺”。
chart.series[0].data[0].update({
color: '#f45b5b'
});
例如: http : //fiddle.jshell.net/mp27yb75/3/
對於氣泡,填充的不透明度設置為0.5,描邊的不透明度為1,描邊和填充顏色相同。
你可以這樣
chart.series[0].data[0].update({
y: 150,
marker: {
fillColor: 'red',
states: {
hover: {
fillColor: 'red',
lineColor: 'red'
}
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.