Highcharts - 如何結合對兩個系列執行相同操作的多系列餅圖的獨特圖例？ （如 onclick：顯示/隱藏）

Question

背景信息：我正在嘗試創建一個多系列餅圖，並希望避免重復圖例，並在單擊圖例時對兩個系列執行操作。

參考圖片在這里

演示鏈接： https://jsfiddle.net/akd01/37jbLkgs/

Highcharts.chart('container', {
    chart: {
       marginTop:-30,
       marginBottom:90,
       height:300,
       type:'pie'
    },
    title:{
        text:''
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%'],
            /*point: {
                events: {
                    legendItemClick: function() {
                      return false;
                    }
                }
            }*/
        },
        
    },
    colors: ['#55d8fe', '#fd8373', '#feda83','#a3a0fb', '#69F0AE', '#E1BEE7','#B2DFDB', '#C5E1A5', '#F8BBD0', '#E6EE9C', '#C6FF00', '#FFF176'],
    series: [{
        name: 'New Projects',
        // innerSize: '40%',
        size: '60%',
        showInLegend: true,
        data: [{name: "Digital 1", y: 5.25},
            {name: "Digital 2", y: 0},
            {name: "FW", y: 13.48},
            {name: "M-signal", y: 17.19},
            {name: "OPS", y: 1.52},
            {name: "Other", y: 12.4},
            {name: "S/W", y: 10.82},
            {name: "Systems", y: 11.3}
        ],
        dataLabels: {
          enabled: true,
          formatter: function () {
            let per = this.point.percentage.toFixed(1)+'%';
            return this.point.percentage !=0?per:null;
            },
          distance: -30,
          shadow:false,
          style: {
            fontWeight: 'normal',
            color: '#555',
            textOutline:0
          }
        },
    },
    {
        name: 'Ref. Project',
        innerSize: '60%',
        size: '80%',
        showInLegend: true,
        data: [{name: "Digital 1", y: 6.17},
            {name: "Digital 2", y: 32.31},
            {name: "FW", y: 11.01},
            {name: "M-signal", y: 20.15},
            {name: "OPS", y: 1.06},
            {name: "Other", y: 13.12},
            {name: "S/W", y: 7.34},
            {name: "Systems", y: 8.84}],
        dataLabels: {
          enabled: true,
          formatter: function () {
            let per = this.point.percentage.toFixed(1)+'%';
            return this.point.percentage !=0?per:null;
            },
          distance: -15,
          shadow:false,
          style: {
            fontWeight: 'normal',
            color: '#555',
            textOutline:0
          }
        },
    }],
    legend: {
        align: 'left',
        // verticalAlign: 'top',
        x: 0,
        y:10,
        // layout: 'vertical',
        itemMarginTop:7,
        marginBottom:40,
        itemStyle: {
            fontSize:'12px',
            fontWeight: 'normal'
        },
        symbolHeight: 15,
        symbolWidth: 15,
        symbolRadius: 0,
        symbolPadding:10
    },
    credits: {
        enabled: false
    }    
});

我努力了

1. showInLegend：系列的真/假

有什么想法可以解決這個問題嗎？

Answer 1

通常您應該使用linkedTo屬性，但它僅適用於系列而不適用於點。 要為點添加鏈接功能，請使用以下插件，該插件按名稱鏈接來自不同系列的點。

(function(H) {
    H.addEvent(H.Point, 'legendItemClick', function() {
        const legendPoint = this;

        this.series.chart.series.forEach(s => {
            if (s !== legendPoint.series) {
                const matchedPoint = s.points.find(p => p.name === legendPoint.name);

                if (matchedPoint) {
                    matchedPoint.setVisible();
                }
            }
        });
    });
})(Highcharts)

---

現場演示： https://jsfiddle.net/BlackLabel/styhx6do/

API 參考： https://api.highcharts.com/highcharts/series.column.linkedTo

文檔： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts