Highcharts Donutchart:避免显示带有嵌套图表的重复图例 [英] Highcharts Donutchart: Avoid showing duplicate legend with nested charts

问题描述

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

I am trying to represent nested data using Highcharts Donut Chart. The charts are generated quite well, however I am having some problems with displaying the legend.

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

Data to be represented: Category A -[High : 20%, | Medium : 50% | Low : 30%] Category B -[High : 10% | Medium : 50% | Low : 40%]

JS Fiddle: http://jsfiddle.net/a2sy9bgj/

JS Fiddle : 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.优先数据

I've created two series 1. Category Data 2. Priority Data

图例应该显示高，中和低，但是由于优先级数据两次具有此信息(高，中和低)，因此图例显示了高，中和低两次.

The legend should show High, Medium and Low, but since the priority data has this information(High, Medium and Low) twice, the Legend shows High, Medium and Low twice.

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

Is there any way to show the legend only once when the data in the series may have duplicates?

推荐答案

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

In the Highcharts you can only hide/show one series. In the pie chart, even you have legend item per slice, there still is just one series.

但是，有希望的人:您可以覆盖对此负责的方法:

However, there is hope for you: you can overwrite method responsible for that:

(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);

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

Now, just set per point, if should be displayed or not:

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

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

当然，还有一件事:单击一个图例可能应该隐藏两个切片.在这种情况下，请使用legendItemClick并找到相应的点将其隐藏.

Of course, there one thing remains: click on one legend probably should hide two slices. In such case, use legendItemClick and find corresponding points to hide them.

这篇关于Highcharts Donutchart:避免显示带有嵌套图表的重复图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！