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

时间:2018-03-28 06:37:03

标签: javascript highcharts pie-chart

我希望通过向下钻取在饼图中显示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},
            ]
        },]
    }
});

更新: Outer part of the chart

点击雅加达数据,你就可以得到这个 click on the jakarta data, and you'll get this

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

有人知道如何在每个图表中使用2个数据标签(内部和外部),包括向下钻取? 谢谢。

1 个答案:

答案 0 :(得分:0)

我看到您使用变通方法通过使用两个饼图来为每个点渲染多个标签。该解决方案存在的问题是:您无法从一个饼图向下钻取到多个饼图(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,
    }]