高图：导出XLS（excel）后有两列，我想添加另一列以显示百分比

Question

饼图，高脚椅中显示一个百分比。但是当我将其导出到excel中时，其中没有数字。如何添加列显示百分比？我试图检查API，但是找不到答案。这是一个演示和一个导出的excel图片。

cabal repl

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'city'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
      }
    }
  },
  series: [{
    colorByPoint: true,
    data: [{
      name: 'BeiJing',
      y: 4,
    }, {
      name: 'ShangHai',
      y: 16,
    }]
  }]
});

Answer 1

您可以动态添加隐藏序列，这些隐藏序列的点值将基于主序列点的percentage参数进行设置。最好的选择是chart.events.load函数。这是代码：

  chart: {
    type: 'pie',
    events: {
        load: function() {
        var data = [];
        this.series[0].data.forEach(p => {
            data.push({
            name: p.name,
            y: p.percentage,
            color: 'transparent',
            borderColor: 'transparent'
          })
        })

        var s1 = this.addSeries({
            name: 'Percents',
            data: data,
        })
      }
    }
  },

实时示例： https://jsfiddle.net/ot8cLsmg/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/highcharts/chart.events.redraw

Answer 2

我是这样解决的：单击下载按钮时，将添加百分比数据，然后在下载后将其删除。这是一些代码：

let percentsData = [
  {
    name: 'BeiJing',
    y: 20 // percents
  },
  {
    name: 'ShangHai',
    y: 80
  }
] 
function downloadExcel() {
  chart.series[1].update({data: percentsData});
  chart.downloadXLS();
  chart.series[1].update({data: []}); 
}

实时示例： https://codepen.io/cr7love/pen/rZGVKx?editors=1010

API参考： https://api.highcharts.com/class-reference/Highcharts.Chart#update