Question

我想知道是否可以放大饼图中的切片。

我的图表是根据此示例jsfiddle example

建模的

chart: {
            renderTo: 'container',
            type: 'area',
            zoomType: 'x',
        }

但它似乎不适用于饼图。我在这里错过了什么吗？理想情况下，我会得到一个包含2层的饼图，其中外层用作内层的子图层。选择子切片时，我可以得到一个完整的饼图，单独显示切片，以及自己的子片等。

Answer 1

不允许对饼图进行缩放，因为其属性显示

x：放大x轴 y：放大y轴 xy：放大两个轴

但您可以使用JavaScript的size属性来显示缩放。 size property demo

Answer 2

我想我找到了我真正想要的东西。它不是缩放，而是捕获切片上的点击事件的选项。

为了做到这一点，必须使用allowPointSelect属性，可以将其添加到这样的饼图中（只是几种不同的方式之一）：

plotOptions: {
    pie: {
        shadow: false,
        allowPointSelect: true,
    },
}

然后，为了捕获点击，必须在所使用的events中声明series属性：

series: [{
    name: 'Example',
    data: [
        {
            name: 'Firefox',   
            value: 45.0
        },
        {
            name: 'IE',
            value: 26.8
        },
        {
            name: 'Chrome',
            value: 12.8,
        },
    ],
    size: '100%',
    point: {
        events: {
           click: function() {
               // some code to execute when clicking a slice
               alert('Slice name: ' + this.name + ' and value: ' + this.value);
           }
        }
    }
}]

然后在该click函数中，可以执行任何javascript代码，也可以访问数据中声明的字段。因此理论上可以在运行中创建第二个饼图。

highcharts - 可以缩放饼图

2 个答案: