highcharts - 两个馅饼,一个带有独特元素的传说(合并传说)

标签 highcharts

是否可以在一个图形中做两个馅饼并合并图例?

我这样做了:http://jsfiddle.net/Adysone/YpfBs/

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    title: {
        text: "Pie Charts",
        align: 'center'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top'
    },
    tooltip: {
        formatter: function () {
            return this.key + ': ' + this.y + ' (' + Math.round(this.percentage) + '%)';
        }
    },
    plotOptions: {
        pie: {
            showInLegend: true,
            size: 200
        }
    },
    series: [
        {
            name: "2011",
            data: [
                {
                    name: "Apple",
                    color: "#FF3333",
                    y: 8
                },
                {
                    name: "Banana",
                    color: "#FFF55C",
                    y: 11
                },
                {
                    name: "Grape",
                    color: "#90007B",
                    y: 9
                },
                {
                    name: "Pear",
                    color: "#F1FFB8",
                    y: 3
                }
            ],
            center: [150,100],
            size: 150
        },
        {
            name: "2012",
            data: [
                {
                    name: "Apple",
                    color: "#FF3333",
                    y: 5
                },
                {
                    name: "Banana",
                    color: "#FFF55C",
                    y: 15
                },
                {
                    name: "Pear",
                    color: "#F1FFB8",
                    y: 8
                }
            ],
            center: [450,100],
            size: 150
        }
    ]
});

但是图例项是重复的,因为它们在两个派中很常见,我该怎么做才能使它们独一无二?

如果不可能,我可以将两个图例分开吗?

谢谢!

最佳答案

请看示例http://jsfiddle.net/u7FQS/15/它使用了 3 个饼图并具有共同的图例

$(chart.series[0].data).each(function(i, e) {
        e.legendItem.on('click', function(event) {
            var legendItem=e.name;

            event.stopPropagation();

            $(chart.series).each(function(j,f){
                   $(this.data).each(function(k,z){
                       if(z.name==legendItem)
                       {
                           if(z.visible)
                           {
                               z.setVisible(false);
                           }
                           else
                           {
                               z.setVisible(true);
                           }
                       }
                   });
            });

        });
    });

关于highcharts - 两个馅饼,一个带有独特元素的传说(合并传说),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16730755/

相关文章:

php - 来自 php 的 Highcharts 多个系列 json

javascript - Highcharts.js 带有平均线的子图

jquery - IE8 上的工具提示不清晰

javascript - 获取 Highcharts 散点图中的所有点?

javascript - 具有 2 个系列和 2 个比较日期的 Highcharts

javascript - 使用 PHP 在 Highcharts 中导入数据

javascript - Highchars 百分比变异位置

javascript - 隐藏值可以在 highcharts 钻取之间传递吗?

php - 如何使用 php 和 mysql 循环 data[] 系列

javascript - 当点向下钻取时获取 Highcharts 中点击点的名称