Highcharts: Как выровнять текстовую метку по центру круговой диаграммы

Question

Я редактирую codepen.io от thomas_rz

https://codepen.io/thomas_rz/pen/vXyoaK?editors=1010

document.addEventListener("DOMContentLoaded", function() {
  var chart1 = new Highcharts.Chart({
    chart: {
      type: 'pie',
      renderTo: 'container'
    },
    title: {
      verticalAlign: 'middle',
      floating: true,
      text: 'CENTERED<br>TEXT'
    },
    plotOptions: {
      pie: {
        innerSize: '50%',
        dataLabels: {
          align: 'right',
          distance: 10,
          connectorWidth: 0
        }
      }
    },

    series: [{
      data: [
        ['Firefox', 44.2],
        ['IE7', 26.6],
        ['IE6', 20],
        ['Chrome', 3.1],
        ['Other', 5.4]
      ]
    }]
  });
});

и верните этот график.

Но мне нужна эта диаграмма, выравнивание текста по центру пирога

Answer 1

Объяснение выравнивания меток данных:

Марки данных пирога не поддерживают такой вид по умолчанию.

В Highcharts положение метки данных тесно связано с положением его разъема.Вы отключили коннекторы в своей демонстрации, и именно поэтому эти метки выглядят неуместно.

Алгоритмы всегда гарантируют, что край VERTICAL центра метки (метка воспринимается как прямоугольник) касаетсяконец разъема.Ваше требование состоит в том, чтобы соединитель мог касаться ЛЮБОГО части коробки этикетки (вертикальной или горизонтальной):

Он не можетбыть достигнуто без продвинутой модификации ядра Highcharts.

Обходной путь:

Мне удалось реализовать нечто очень близкое к тому, что вам нужно, переопределив две основные функции:

(function(H) {
  H.seriesTypes.pie.prototype.dataLabelPositioners.radialDistributionX = function(series, point) {
    return point.labelPosition.natural.x - (point.half ? -0.5 : 0.5) * point.dataLabel.width;
  }
  H.seriesTypes.pie.prototype.dataLabelPositioners.radialDistributionY = function(point) {
    return point.labelPosition.natural.y;
  }
})(Highcharts);

Демонстрационная версия : http://jsfiddle.net/BlackLabel/htk40ena/

Приведенный выше код заставляет Highcharts менять место, где соединители касаются меток.Обратите внимание, что в моей демонстрации разъемы не имеют смысла (попробуйте включить их).

Answer 2

Highcharts в расчетах не учитывает правильную высоту заголовка с тегом <br>.Вы можете вычислить правильную позицию заголовка в событии render:

chart: {
    ...,
    events: {
        render: function() {
            var title = this.title;
            title.attr({
                y: this.plotTop + this.plotHeight / 2 +
                    title.getBBox().height / 2 -
                    parseInt(title.styles.fontSize)
            });
        }
    }
},

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/vnsp1ybz/

Справочник по API:

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

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr