Выравнивание меток в пончике

Question

Я пытаюсь сделать пончик из старшей диаграммы с легендой на стороне, я действительно изо всех сил стараюсь сделать метки данных более центрированными.На данный момент каждый из них находится в другом месте,

изображение предполагаемого результата:

https://codepen.io/mattdavidson/pen/qgqZyV

Highcharts.chart('container', {
  credits: { enabled: false },
  chart: { height: 300, width: 500, animation: false },
  title: {
    align: 'center',
    verticalAlign: 'middle',
    text: 10,
    y: 25,
    x: 55,
    style: { color: '#333333', fontSize: '72px', fontWeight:'bold'},
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        format: '{point.y}',
        distance: -25,
        style: { fontSize: '32px', textOutline: 0 },
      },
      animation: false,
      showInLegend: true,
    },
  },
  legend: {
    layout: 'vertical',
    verticalAlign: 'middle',
    align: 'left',
    symbolHeight: 25,
    symbolRadius: 5,
    itemMarginTop: 10,
    itemMarginBottom: 10,
  },
  series: [
  {
  type: 'pie',
  innerSize: '55%',
  colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
  data: [['Category 1', 4], ['Category 2', 5], ['Category 3', 1]],
  },
  ],
});

Answer 1

На сайте Highcharts сообщается о позиции ярлыков пончиков.Проверьте это здесь: https://github.com/highcharts/highcharts/issues/9005.

Я изменил некоторые параметры и добавил пользовательский текст, используя Highcharts.SVGRenderer # text (динамическая сумма всех значений) в центре пончика.Возможно, это поможет вам: https://jsfiddle.net/BlackLabel/2jmqext9/.

Код:

Highcharts.chart('container', {
  credits: {
    enabled: false
  },
  chart: {
    height: 300,
    width: 500,
    animation: false,
    events: {
        load: function() {
        var chart = this,
                offsetLeft = -20,
            offsetTop = 10,
                x = chart.plotLeft + chart.plotWidth / 2 + offsetLeft,
            y = chart.plotTop + chart.plotHeight / 2 + offsetTop,
            value = 0;

                chart.series[0].yData.forEach(function(point) {
            value += point;
        });

        chart.renderer.text(value, x, y).add().css({
            fontSize: '30px'
        }).toFront();
      }
    }
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        color: '#fff',
        format: '{point.y}',
        distance: -25,
        style: {
          fontSize: '20px',
          textOutline: 0
        },
      },
      animation: false,
      showInLegend: true,
    },
  },
  legend: {
    layout: 'vertical',
    verticalAlign: 'middle',
    align: 'left',
    symbolHeight: 15,
    symbolRadius: 5,
    symbolPadding: 10,
    itemMarginTop: 10,
    itemMarginBottom: 10,
    itemStyle: {
        fontSize: '15px'
    }
  },
  series: [{
    type: 'pie',
    innerSize: '55%',
    colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
    data: [
      ['Category 1', 4],
      ['Category 2', 2],
      ['Category 3', 12]
    ],
  }, ],
});