Grafico a torta HighCharts - Aggiungi testo all'interno di ogni sezione

Question

Sto creando un grafico a torta finanziario utilizzando HighCharts che rappresenta l'asset allocation. Il mio obiettivo è creare un grafico che rappresenti i valori di allocazione effettivi in ​​ogni sezione ma all'interno di ciascuna diapositiva verrà visualizzata essenzialmente una seconda etichetta di dati che visualizza la percentuale di destinazione per vari veicoli di investimento. È importante notare che l'attuale asset allocation potrebbe non corrispondere sempre al valore di allocazione target.

Ho ottenuto tutto funzionante tranne le etichette di destinazione all'interno di ciascuna diapositiva. Vedere l'immagine sotto per quello che vorrei realizzare:

Ecco quello che ho finora:

  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

Ecco la jsfiddle per questo e il codice per mostrare datalabels dentro e fuori .

Per raggiungere questo

1. è necessario dare due torta di serie del grafico. uno guarderà in avanti e l'altro sarà di ritorno.
2. se si desidera simularlo, quindi apportare le modifiche in size: '80%'.
3. distanza: l'uso della distanza è per mostrare i dati in entrata e in uscita che è possibile modificare in base a ciò che si desidera posizione di esso.
4. allowPointSelect: il valore predefinito di questo è falso, ma se questo viene utilizzato, il grafico a torta che si trova dietro verrà visualizzato facendo clic sulla porzione del grafico a torta frontale.

Codice:

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

Grafico a torta sarà guardato come di seguito: