我目前正在使用HighCharts变量饼图 . 我想为图例点击添加更多功能,所以我添加了一个单独的legendItemClick事件来执行两件事:它应该像默认(它没有),但也纠正了圆环内的文本值,这也是不行 .
以下是一些可以使用的代码:
this._chart = Highcharts.chart(this.$.chartsContainer, {
title: {
text: '<div style="font-size: 30px; font-weight:600;">' + ySum + '</div><div>Total demands</div>',
align: 'center',
verticalAlign: 'middle',
useHTML: true,
style: {
'font-size': '16px',
'font-weight': 'normal',
'text-align': 'center',
'text-transform': 'inherit'
},
x: -2,
y: -27,
},
colors: ['#315674', '#006281', '#006D81', '#00BFE2', '#53A1B4', '#4FB4B5', '#00E8D2', '#FFC35F', '#9ECBD6'],
plotOptions: {
series: {
dataLabels: {
enabled: false },
showInLegend: true,
style: {'border-radius': '15px', 'font-weight': 'normal'},
},
variablepie: {
name: '',
borderWidth: 5, borderColor: 'white', minPointSize: 16,
color: 'white', innerSize: '60%',
point: {
events: {
legendItemClick: function(event) {
console.log(event);
if (this.visible) {
this.series.visible = false;
ySum = ySum - event.target.options.y;
} else {
ySum = ySum + event.target.options.y;
}
}
}
}
},
},
tooltip: {
useHTML: true,
headerFormat: '<small>{point.y}</small><table>',
pointFormat: '',
footerFormat: ''
},
series: [{
type: 'variablepie',
data: ySerie,
},
]
});
this.reflowChart();
我尝试通过其可见属性隐藏点击的系列数据,但这不能正常工作,因为它隐藏了点击的数据,但不会重新绘制图表以形成一个完整的圆圈(如果你知道我在说什么) .
第二个问题是文本 Headers . 我希望它显示新的更正值(它是 Headers 内的ySum变量:{text:block) . 我尝试设置新值但由于某种原因它不会更新图表的数据 . 例如,我们有3个值,每个值为10 . 它显示“总共30” . 单击并隐藏1个图例项时,应将ySum更新为现在显示“20 total” .
所以总之,我需要帮助1)如何正确隐藏和显示点击的图例系列数据2)使文本属性ySum相应地更新其值
谢谢您的帮助!
-------------------更新-----------------
我自己想出了第一个问题(如果有其他人面对它我会留下问题):legendItemClick事件是一个可以返回布尔值的函数:你可以通过设置true =标准行为来操纵它的行为 - >它会隐藏数据系列AND重绘图表false =它什么都不做 - >类似于event.preventDefault()
1 回答
要更改图表 Headers ,您可以使用
setTitle
方法:API参考:https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
现场演示:https://jsfiddle.net/BlackLabel/sdh1y0tw/