摘要: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;
                    }
                }
            }
        },

沈小由
10 声望0 粉丝