HighCharts円グラフ - 各スライス内にテキストを追加します

Question

資産配分を表すHighChartsを使用して金融円グラフを作成しています。私の目標は、各スライスの実際の割り当て値を表すグラフを作成することですが、各スライド内には基本的に、さまざまな投資ビークルの目標パーセンテージを表示する第2のデータラベルが表示されます。現在の資産配分が目標配分値と必ずしも一致するとは限らないことに注意することが重要です。

各スライド内のターゲットラベルを除いてすべてが動作しています。私が達成したいもののため、以下の画像を参照してください：ここで

は、私がこれまで持っているものである：ここでは

  var asset_allocation_pie_chart = new Highcharts.Chart({ 
      chart: { renderTo: 'asset_allocation_bottom_left_div' }, 
      title: { text: 'Current Asset Allocation', style: { fontSize: '17px', color: entity_color, fontWeight: 'bold', fontFamily: 'Verdana'} }, 
      subtitle: { text: '(As of ' + effective_date_formatted + ')', style: { fontSize: '15px', color: entity_color, fontFamily: 'Verdana', marginBottom: '10px' }, y: 40 }, 
      tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 0 }, 
      plotOptions: { 
       pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorWidth: 1, connectorColor: '#000000', formatter: function() { return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %'; } } } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Asset Allocation', 
       data: [['Investment Grade Bonds', InvestmentGradeBondPercentage], ['High Yield Bonds', HighYieldBondPercentage], ['Hedged Equity', HedgedEquityPercentage], ['Global Equity', GlobalEquityPercentage], ['Cash', CashPercentage]] 
      }], 
      exporting: { enabled: false }, 
      credits: { enabled: false } 
     }); 

Answer 1

は、この内外datalabelsを表示するコードのjsfiddleです。あなたは2円グラフシリーズを与える必要があり、この

1. を達成するために

   。 1つは正面を見ていて、他は後ろにいるだろう。

2. シミュレーションする場合はsize: '80%'に変更してください。
3. 距離：距離の使用は、あなたがそれの位置を望むあなたに応じて変更できるデータラベルを表示することです。
4. allowPointSelect：これのデフォルト値はfalseですが、これを使用すると、円グラフの後ろにある円グラフは、円グラフのスライスをクリックすると表示されます。

コード：

var asset_allocation_pie_chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'asset_allocation_bottom_left_div' 
     }, 
     title: { 
      text: 'Current Asset Allocation', 
      style: { 
       fontSize: '17px', 
       color: 'red', 
       fontWeight: 'bold', 
       fontFamily: 'Verdana' 
      } 
     }, 
     subtitle: { 
      text: '(As of ' + 'dfdf' + ')', 
      style: { 
       fontSize: '15px', 
       color: 'red', 
       fontFamily: 'Verdana', 
       marginBottom: '10px' 
      }, 
      y: 40 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
      percentageDecimals: 0 
     }, 
     plotOptions: { 
      pie: { 
       size: '80%', 
       cursor: 'pointer', 
       data: [ 
        ['Investment Grade Bonds', 100], 
        ['High Yield Bonds', 200], 
        ['Hedged Equity', 300], 
        ['Global Equity', 400], 
        ['Cash', 500] 
       ] 
      } 
     }, 
     series: [{ 
       type: 'pie', 
       name: 'Asset Allocation', 
       dataLabels: { 
        verticalAlign: 'top', 
        enabled: true, 
        color: '#000000', 
        connectorWidth: 1, 
        distance: -30, 
        connectorColor: '#000000', 
        formatter: function() { 
         return Math.round(this.percentage) + ' %'; 
        } 
       } 
      }, { 
       type: 'pie', 
       name: 'Asset Allocation', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorWidth: 1, 
        distance: 30, 
        connectorColor: '#000000', 
        formatter: function() { 
         return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %'; 
        } 
       } 
      }], 
     exporting: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     } 
    }); 

円グラフは、以下のように見えたことでしょう。