ハイチャート：円グラフの中央にテキストラベルを配置する方法

debugcn 投稿 Dev

レジスサントス

thomas_rzでcodepen.ioを編集します

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

そして、このチャートを返します。

しかし、私はこのチャートが必要です、テキストはパイの中央中央に整列します

カミル・クリグ

データラベルの配置の説明：

Pieのデータラベルは、デフォルトではそのような外観をサポートしていません。

Highchartsでは、データラベルの位置は、そのコネクタの位置と強く関連しています。デモでコネクタを無効にしたため、これらのラベルが間違って配置されているように見えます。

アルゴリズムは常に、ラベルの垂直エッジの中心（ラベルはボックスとして認識されます）がコネクタの端に接触していることを確認します。要件は、コネクタがラベルのボックスの任意の部分（垂直または水平）に接触できる必要があることです。

高度なHighchartsコアの変更なしでは実現できません。

回避策：

2つのコア関数を再定義することで、必要なものにかなり近いものを実装することができました。

(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に強制的に変更させます。私のデモではコネクタが意味をなさないことに注意してください（コネクタを有効にしてみてください）。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]