Heightchartsカスタム凡例クリックイベント
1926 ワード
要旨:heightchartsグラフに付属する凡例クリックイベントは、表示/非表示の凡例をクリックすると、対応するseriesが非表示/表示になります.製品の需要はある図例をクリックして、その図例の対応するデータだけを見たいです.そこで例クリックイベントを修正しました.効果リンクの実装
// /
function getVisibleMode(series, serieName) {
var allVisible = true;
var allHidden = true;
for (let i = 0; i < series.length; i++) {
if (series[i].name == serieName)
continue;
allVisible &= series[i].visible;
allHidden &= (!series[i].visible);
}
if (allVisible && !allHidden)
return 'all-visible';
if (allHidden && !allVisible)
return 'all-hidden';
return 'other-cases';
};
//heightcharts
plotOptions : {
series: {
events : {
legendItemClick : function(event) {
var series = this.chart.series;
var mode = getVisibleMode(series, this.name);
var enableDefault = false;
if (!this.visible) {
enableDefault = true;
}
else if (mode == 'all-visible') {
series.forEach((serie,k)=>{
serie.hide();
)
this.show();
}
else if (mode == 'all-hidden') {
series.forEach((serie,k)=>{
serie.show();
)
}
else {
enableDefault = true;
}
return enableDefault;
}
}
}
},