![](/img/trans.png)
[英]Line chart legend color not getting update on button click (highcharts-angular)
[英]How do i color the highcharts legend square symbol when my chart has multiple color entries
我正在創建一個需要條形圖表的應用程序,並且圖表中的條形圖使用了多種顏色。 但是對於圖例,我想指定一種特定的顏色,單擊圖例時,它顯示為灰色,這是高圖的默認行為
我在系列中添加了多種顏色,所以我不能在那添加相同的顏色
this.chartConfigWeekly = {
chart: {
zoomType: 'none'
},
title: {
text: 'Weekly Utilization'
},
credits: {
enabled: false
},
colors: this.colorArrWeekly,
legend: {
symbolRadius:0
},
xAxis: [
{
categories: this.weeklyUtilizationCategories,
crosshair: true,
gridLineWidth: 1,
tickmarkPlacement: 'on',
// tickInterval: 4
tickPositions: this.tickPosition,
}
],
yAxis: [
{
// Primary yAxis
labels: {
format: '{value} %',
style: {
color: 'gray'
}
},
max: 100,
min: 0,
alignTicks: false,
tickAmount: 6,
tickInterval: 20,
title: {
text: 'Utilization',
style: {
color: 'black'
}
},
opposite: true
},
{
// Secondary yAxis
// gridLineWidth: 0,
allowDecimals: false,
title: {
text: 'Number of Samples',
style: {
color: 'black'
}
},
tickAmount: 6,
labels: {
format: '{value} ',
style: {
color: 'gray'
}
}
}
],
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.point.display}</small><table><br>',
crosshairs: true,
positioner: function(labelWidth, labelHeight, point) {
var x;
if (point.plotX - labelWidth / 2 > 0) {
x = point.plotX - labelWidth / 2;
} else {
x = 0
}
return {
x: x,
y: point.plotY
}
},
shape: 'square'
},
series: [
{
name: 'total number of samples injected',
type: 'column',
yAxis: 1,
data: this.weeklyUtilizationData,
tooltip: {
valueSuffix: ''
},
colorByPoint: true
},
{
name: '% of usage per total hours 24/7',
type: 'spline',
data: this.weeklyUtilizationUsage,
tooltip: {
valueSuffix: ''
},
color: 'blue'
}
]
};
您可以包裝colorizeItem
方法並提供自定義的legendColor
屬性:
(function(H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
var color = item.color;
item.color = item.options.legendColor;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.color = color;
});
}(Highcharts));
系列選項:
series: [{
...,
legendColor: 'red',
colorByPoint: true
}, ...
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.