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;
                    }
                }
            }
        },