我想自定义highchart的图例,实现:
- 将会有点而不是线
- 点的颜色和图例文本的颜色将等于 this.color
- 在不可见状态(onclick 图例)上,我想将颜色更改为 highchart 的默认选项(灰色)
这是我到目前为止所拥有的:
我做了什么:
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>',
}
我缺少什么: - 单击时,图例不会将其颜色更改为默认灰色
我正在寻找像 legend-labelFormat 这样的东西来实现不可见状态,但我在 highchart 的文档中没有找到它(顺便说一句,真的很好),还有其他方法可以实现这一点吗?
最佳答案
我找到了答案,但并不像我希望的那么容易:
我使用了事件监听器plotOptions.series.events.legendItemClick, Chart.legend.update 和 legend.labelFormatter,带有外部变量
外部变量:
var legendsStatus = {};
使用 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>'
}
},
使用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>'
}
});
}
}
}
},
关于javascript - highchart自定义图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46304119/