Question

我创建了一个包含两个系列的饼图。这是我的情况：

单击左侧饼图时，右侧饼图将填充新数据。

我第一次点击左侧的一个切片，点击的切片完美地显示出来。

但是在点击之后，我点击了另一个切片，之前切成的切片将不会切入我想要的切片。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        series: [
                {
                    allowPointSelect: true,
                    size: 100,
                    center: [100, 100],
                    events: {
                        click: function(e) {
                            var chart = window.chart;
                            var data = [
                                ['Firefox', 44.2],
                                ['IE7', 26.6],
                                ['IE6', 20],
                                ['Chrome', 3.1],
                                ['Other', 5.4]
                                ];
                            var series = this.chart.series;
                            series[1].setData(data);
                            e.point.slice();
                        }
                    },
                    data: [
                          ['Firefox', 44.2],
                          ['IE7', 26.6],
                          ['IE6', 20],
                          ['Chrome', 3.1],
                          ['Other', 5.4]
                          ]
                } ,
                {
                    size: 100,
                    center: [300, 100],
                    data: [["hehe", 10], ['IE7', 26.6]]
                }
                ]
           });
});

如果有人知道如何做这个演示http://www.highcharts.com/demo/pie-basic我的情况。请告诉我。

Answer 1

老实说，我建议使用两个独立的图表。

Answer 2

我建议你使用两个单独的饼图。

使用

时还有一件事

allowPointSelect: true,

最好在

中设置它

plotOPtions:{
pie: {
allowPointSelect: true
}
}

还有一件事是你使用了e.point.slice（）方法。这种方法将切片。你没有切入，直接为新点制作新的切片。

我真诚的建议是使用两张图表。我希望你明白了

Answer 3

您可能想要查看此lib，您可以使用它创建动态和可探索的饼图（基于html5，基于javascript）。

它支持分层数据结构，因此您可以点击第一级饼图和第二级驱动器中的任何数据。

http://datavisualizationsoftwarelab.com/en/products/pie-chart/

饼图示例：

单击第一个饼图并将数据设置为第二个饼图时，切入和出现工作错误

3 个答案: