Question

我希望通过向下钻取在饼图中显示2个数据标签。我知道这可以通过将2个饼图与不同的数据标签重叠来实现。但是，在向下钻取中，它只显示1个数据标签，这是我放的最后一个（高级图表忽略了第一个数据标签）。

这是我的尝试： https://jsfiddle.net/firstlutfi/a3v3mhef/

    $('#chart').highcharts({
    chart: {
        type: 'pie'
    },
    xAxis: {
        type: 'category'
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{series.name}</span><br>',
        pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
            percentageDecimals: 0
    },
            plotOptions: {
        pie: {
            size: '80%',
            cursor: 'pointer',
        data: [{
            name: 'Jakarta',
            y: 7000000,
            drilldown: 'jakarta_sales'
        }, {
            name: 'New York',
            y: 5000000,
        },
        ]
        },
    },
    series: [{
                    type: 'pie',
        name: 'Sales Details',
        colorByPoint: true,
                    dataLabels: {
            verticalAlign: 'top',
            enabled: true,
            color: '#000000',
            connectorWidth: 1,
            distance: -30,
            connectorColor: '#000000',
            format: '{point.percentage:.2f}%'
        },
    },{
                    type: 'pie',
        name: 'Sales Details',
        colorByPoint: true,
                    dataLabels: {
            verticalAlign: 'top',
            enabled: true,
            color: '#000000',
            connectorWidth: 1,
            distance: 30,
            connectorColor: '#000000',
            formatter: function () {
                return '<b>' + this.point.name + '</b>:<br/> ' + this.y + ' ';
            }
        }
    }],
    exporting: {
      enabled: true,
    },
    drilldown: {
        series: [
                    {
            name: 'Jakarta Sales',
            id: 'jakarta_sales',
            data: [
                {name:'Car Brand A', 
                dataLabels: {
                  verticalAlign: 'top',
                  enabled: true,
                  color: '#000000',
                  connectorWidth: 1,
                  distance: -30,
                  connectorColor: '#000000',
                  format:'{point.percentage:.2f}%'
                },
                y:800000},
                                    {name:'Car Brand B', y:400000},
            ]
        },
        {
            name: 'Jakarta Sales',
            id: 'jakarta_sales',
            data: [
                {name:'Car Brand A', 
                dataLabels: {
                  verticalAlign: 'top',
                  enabled: true,
                  color: '#000000',
                  connectorWidth: 1,
                  distance: 30,
                  connectorColor: '#000000',
                  format:'{point.name}:<br/> {point.y}'
                },
                y:800000},
                                    {name:'Car Brand B', y:400000},
            ]
        },]
    }
});

更新：

点击雅加达数据，你就可以得到这个

我想要的结果是在钻取中有2个标签。一个是数量（在馅饼外面）和百分比（在馅饼内）。

有人知道如何在每个图表中使用2个数据标签（内部和外部），包括向下钻取？谢谢。

Answer 1

我看到您使用变通方法通过使用两个饼图来为每个点渲染多个标签。该解决方案存在的问题是：您无法从一个饼图向下钻取到多个饼图（ID是唯一的）。

提醒：还有另一种解决方案：Highcharts. Pie chart. DataLabels formatter

在您的情况下，请尝试使用async-drilldown（请参阅drilldown event中的详细信息）：

https://jsfiddle.net/BlackLabel/a3v3mhef/77/

代码段：

创建活动：
```
filter
```

启用点上钻取：

chart: {
  type: 'pie',
  events: {
    drilldown: function (e) {
      this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[0]);
      this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[1]);

      this.applyDrilldown();
    }
  }
},

设置系列参考：

data: [{
  name: 'Jakarta',
  y: 7000000,
  drilldown: true // just enabled, no ID
}, {
  name: 'New York',
  y: 5000000,
}]

Highcharts饼下拉列表显示饼图内的标签

1 个答案: