Highcharts: есть два столбца после экспорта XLS (Excel), я хочу добавить еще один столбец, показывающий процент

Question

На круговой диаграмме показан процент, высокие стульчики. Но когда я экспортирую его в Excel, в нем есть цифры, а не проценты. Как я могу добавить столбец показывает процент? Я попытался проверить API, но я не нашел ответ. Вот демонстрационная версия и экспортированная картинка Excel.

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,
    }]
  }]
});

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<script src="http://cdn.hcharts.cn/highcharts/modules/export-data.js"></script>

<div id="container" class="chart"></div>

Answer 1

Я решил это следующим образом: при нажатии кнопки загрузки будут добавлены процентные данные, затем они будут удалены после загрузки. Вот некоторый код:

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

Answer 2

Вы можете динамически добавлять скрытые серии, значения точек которых будут установлены на основе параметра 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