[英]highchart customize legend
I will like to custom the legend of highchart, to achieve: 我要定制highchart的图例,以实现:
This is what I have so far: 这是我到目前为止的内容:
what I did: 我做了什么:
legend: {
useHTML: true,
symbolWidth: 0,
lableFormat: '<div>' +
'<div style="border-radius:50%; width: 10px; height:10px: background-color:{color}; display: inline-block; margin-right:5px"> </div>' +
"<span style='color:{color};font-family:proximaNovaBold'> {name} </span>"
'<div>',
}
what I am missing: - on click, the legend doesn't change his color to default gray color 我缺少的是:-单击时,图例不会将其颜色更改为默认的灰色
I was looking for something like legend-labelFormat for invisible status, but I didn't find it in the docs of highchart (really good by the way), is there any other way to accomplish this? 我一直在寻找不可见状态的Legend-labelFormat之类的东西,但是我在highchart的文档中找不到它(顺便说一句确实很好),还有其他方法可以实现吗?
I found the answer but it wasn't easy as I hoped: 我找到了答案,但并非如我所愿:
I used event listener plotOptions.series.events.legendItemClick, chart.legend.update, and legend.labelFormatter, with external variable 我将事件侦听器plotOptions.series.events.legendItemClick,chart.legend.update和legend.labelFormatter与外部变量一起使用
External Variable: 外部变量:
var legendsStatus = {};
Custom legend using labelFormatter: 使用labelFormatter的自定义图例:
legend :{
useHTML: true,
symbolWidth: 0,
labelFormatter: function () {
return '<div>' +
'<div style="border-radius: 50%; width: 10px; height: 10px; background-color: ' + this.color +'; display: inline-block; margin-right:5px"> </div>' +
"<span style='color:" + this.color + "; font-family:proximaNovaBold'> " + this.name + " </span>" +
'</div>'
}
},
Event listener using chart.legend.update: 使用chart.legend.update的事件侦听器:
plotOptions: {
series: {
marker: {
enabled: false
},
events : {
legendItemClick : function(){
legendsStatus[this.name] = this.visible;
this.chart.legend.update( {
useHTML: true,
symbolWidth: 0,
labelFormatter: function () {
// legend status = visible
if (!legendsStatus[this.name])
return '<div>' +
'<div style="border-radius: 50%; width: 10px; height: 10px; background-color: ' + this.color +'; display: inline-block; margin-right:5px"> </div>' +
"<span style='color:" + this.color + "; font-family:proximaNovaBold'> " + this.name + " </span>" +
'</div>'
// legend status = invisible
return '<div>' +
'<div style="border-radius: 50%; width: 10px; height: 10px; background-color: #cccccc; display: inline-block; margin-right:5px"> </div>' +
"<span style='color: #cccccc; font-family:proximaNovaBold'> " + this.name + " </span>" +
'</div>'
}
});
}
}
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.