Highcharts Donutchart：避免使用嵌套图表显示重复的图例

Posted 2023-02-16

【中文标题】Highcharts Donutchart：避免使用嵌套图表显示重复的图例

【英文标题】：Highcharts Donutchart: Avoid showing duplicate legend with nested charts

【发布时间】：2015-04-27 07:29:01

【问题描述】：

我正在尝试使用 Highcharts 圆环图来表示嵌套数据。图表生成得很好，但是我在显示图例时遇到了一些问题。

要表示的数据： A类-[高：20%，|中 : 50% |低：30%] B类-[高：10% |中 : 50% |低：40%]

JS 小提琴：http://jsfiddle.net/a2sy9bgj/

  $(function () 
    // Build the data arrays
    var categoryData = [
        name: 'Category A',
        y : 60,
        color: 'white',
        borderColor : 'black'
       ,
       
        name: 'Category B',
        y : 40,
        color: 'white',
        borderColor : 'black'
       ];

    var priorityData = [
      
        name: 'High',
        y : 10,
        category : 'Category A',
        color: 'Red',
      , 
      
        name: 'Medium',
        y : 30,
        category : 'Category A',
        color: 'Yellow',
      , 
        name: 'Low',
        y : 20,
        category : 'Category A',
        color: 'Green',
      ,
        name: 'High',
        y : 20,
        category : 'Category B',
        color: 'Red'
      , 
      
        name: 'Medium',
        y : 10,
        category : 'Category B',
        color: 'Yellow',
      , 
        name: 'Low',
        y : 10,
        category : 'Category B',
        color: 'Green',
      
    ];

        // Create the chart
        $('#container').highcharts(
            chart: 
                type: 'pie'
            ,
            title: 
                text: 'Browser market share, April, 2011'
            ,
            yAxis: 
                title: 
                    text: 'Total percent market share'
                
            ,
            plotOptions: 
                pie: 
                    showInLegend : true,
                    shadow: false,
                    center: ['50%', '50%'],
                
            ,
            tooltip: 
                valueSuffix: '%'
            ,
            series: [
                name: 'Category',
                showInLegend : false,
                data: categoryData,
                size: '60%'               
            , 
                name: 'Priority',
                data: priorityData,
                size: '80%',
                innerSize: '60%'
             ]
        );
    );

我创建了两个系列 1. 类别数据 2. 优先数据

图例应显示高、中和低，但由于优先级数据具有此信息（高、中和低）两次，图例显示高、中和低两次。

当系列中的数据可能有重复时，有没有办法只显示一次图例？

【参考方案1】：

在 Highcharts 中，您只能隐藏/显示一个系列。在饼图中，即使每个切片都有图例项，仍然只有一个系列。

但是，你有希望：你可以覆盖负责的方法：

(function (H) 
    var UNDEFINED;
    /**
     * Returns true if the object is not null or undefined. Like MooTools' $.defined.
     * @param Object obj
     */
    function defined(obj) 
        return obj !== UNDEFINED && obj !== null;
    
    H.wrap(H.Legend.prototype, 'getAllItems', function (p) 
        var allItems = [],
            pointsForLegend = [];
        H.each(this.chart.series, function (series) 
            var seriesOptions = series.options;

            // Handle showInLegend. If the series is linked to another series, defaults to false.
            if (!H.pick(seriesOptions.showInLegend, !defined(seriesOptions.linkedTo) ? UNDEFINED : false, true)) 
                return;
            

            if (series.legendItems) 
                // use points or series for the legend item depending on legendType
                allItems = allItems.concat(series.legendItems);
             else if (seriesOptions.legendType === 'point') 
                H.each(series.data, function (e, i) 
                    if (e.showInLegend) 
                        pointsForLegend.push(e);
                    
                )
                allItems = allItems.concat(pointsForLegend);
             else 
                allItems = allItems.concat(series);
            
        );
        return allItems;
    );
)(Highcharts);

现在，只需设置每个点，是否应该显示：

 point.showInLegend: i // 0 == false, 1 == true

为您演示：http://jsfiddle.net/a2sy9bgj/6/

当然，还有一件事：点击一个图例可能会隐藏两个切片。在这种情况下，使用legendItemClick 并找到对应的点来隐藏它们。

【讨论】：

谢谢！..这对我帮助很大！