Question

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

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

  $(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.优先数据

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

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

Answer 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并找到相应的点来隐藏它们。

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

1 个答案: