highcharts 单击堆叠条形图上的项目时,如何灰显其他条形/堆叠项目?

lnlaulya  于 2023-03-02  发布在  Highcharts
关注(0)|答案(1)|浏览(307)

我使用的是HighCharts和堆叠条形图,条形图的每一部分都是可点击的,并触发一个函数来过滤表格中的数据。
标准highcharts hover功能将不在当前系列中的数据灰显。
我希望灰显图表上的所有其他数据,除了我单击的条形图上的堆栈区域。
下面的插图是我希望实现的。第一张图片显示了所有的栏。第二张图片显示我已经点击了顶部栏的中间部分。我需要所有其他的堆栈/栏变灰(禁用)。
理想情况下,第二次单击将重新启用所有功能。
(请忽略图像2上的悬停工具提示)

我现在可以使用以下方法检测并返回当前单击的堆栈项:

series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function () {
                console.log('Series Name : ' + this.name + ', Stack Name: ' + this.series.name);
            }
        }
    }
}

在本例中,它将返回Series Name : Estimate, Stack Name: Projects In Progress

l5tcr1uw

l5tcr1uw1#

下面是最终的解决方案(根据标准的Highcharts堆叠条形图示例修改而来)。
它允许您点击堆叠条上的任何地方,并保持该数据点的不透明度为1,同时将所有其他系列/点的不透明度降至0.3。
第二次单击该点将使所有点恢复为不透明度1。
这是一把能用的小提琴https://jsfiddle.net/tvg6d5a0/1/

var storedId = null;
var chart1 =Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'UEFA CL top scorers by season'
    },
    xAxis: {
        categories: ['2020/21', '2019/20', '2018/19', '2017/18', '2016/17']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Goals'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: '#ffffff'
            },
            states: {
                hover: {
                    enabled: false
                },
                inactive: {
                    opacity: 1
                }
            },
            point: {
                events: {
                    click: function () {
                        var i;
                        var j;
                        //set the opacity back to 1
                        for (i = 0; i < chart1.series.length; i++) {
                            for (j = 0; j < chart1.series[i].data.length; j++) {
                            console.log("here");
                                chart1.series[i].data[j].graphic.attr({opacity: 1});
                                }
                        }
                        if (this.id == storedId) {
                            //code to un-filter external table goes here
                            storedId = null;
                        }
                        else{
                            for (i = 0; i < chart1.series.length; i++) {
                                for (j = 0; j < chart1.series[i].data.length; j++) {
                                    if(j !== this.index || i !== this.series.index) {
                                        chart1.series[i].data[j].graphic.attr({opacity: 0.3});
                                    }
                                }
                            }
                            //code to filter external table goes here
                            storedId = this.id;
                        }
                    }
                }
            },
        }
    },
    series: [{
        name: 'Cristiano Ronaldo',
        data: [4, 4, 6, 15, 12],
        color: 'red'
    },{
        name: 'Lionel Messi',
        data: [5, 3, 12, 6, 11],
        color: 'green'
    },{
        name: 'Robert Lewandowski',
        data: [5, 15, 8, 5, 8],
        color: 'blue'
    }]
});

相关问题