HighCharts Tortendiagramm - Text innerhalb jedes Slice hinzufügen

Question

Ich erstelle ein finanzielles Tortendiagramm mit HighCharts, das die Asset Allocation darstellt. Mein Ziel ist es, ein Diagramm zu erstellen, das die tatsächlichen Zuteilungswerte in jedem Segment darstellt, aber innerhalb jeder Folie wird im Wesentlichen ein zweites Datenlabel angezeigt, das den Zielprozentsatz für verschiedene Investitionsvehikel anzeigt. Es ist wichtig zu beachten, dass die aktuelle Asset-Allokation möglicherweise nicht immer mit dem Zielallokationswert übereinstimmt.

Ich habe alles mit Ausnahme der Target-Etiketten in jeder Folie funktioniert. Siehe das Bild unten für das, was würde ich erreichen möchte:

Hier ist, was ich habe bisher:

  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

Hier ist die jsfiddle für dieses und Code datalabels innen zu zeigen und außerhalb .

Zu diesem

1. Sie Serie benötigen, um zwei Kreisdiagramm zu erreichen. Einer wird nach vorne schauen und der andere wird hinten sein.
2. Wenn Sie es simulieren möchten, dann nehmen Sie Änderungen in size: '80%'.
3. Entfernung: die Verwendung der Entfernung ist, um Datalabels ein- und auszublenden, die Sie entsprechend Ihrer Position ändern können.
4. allowPointSelect: Der Standardwert ist false, aber wenn dies verwendet wird, wird nach dem Klicken auf die Scheibe des vorderen Kreisdiagramms das Kreisdiagramm dahinter angezeigt.

Code:

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

Kreisdiagramm wird wie unten betrachtet werden: