Wykres kołowy Wykresy wysokiej mocy - Dodaj tekst wewnątrz każdego plasterka

Question

Tworzę wykres kołowy z wykorzystaniem wykresu HighCharts, który reprezentuje alokację zasobów. Moim celem jest stworzenie wykresu, który reprezentuje rzeczywiste wartości przydziału w każdym plasterku, ale wewnątrz każdego slajdu pokaże się zasadniczo druga etykieta danych, która wyświetla procent docelowy dla różnych pojazdów inwestycyjnych. Ważne jest, aby pamiętać, że aktualna alokacja aktywów może nie zawsze być zgodna z docelową wartością alokacji.

Mam wszystko, co działa, poza etykietami Target w każdym slajdzie. Patrz rysunek poniżej tego, co chciałbym osiągnąć:

Oto co mam do tej pory:

  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

Oto jsfiddle do tego i kod, aby pokazać datalabels wewnątrz i na zewnątrz .

Aby osiągnąć ten

1. trzeba dać Dwa Pie serii wykresu. jeden będzie patrzył z przodu, a drugi będzie z tyłu.
2. jeśli chcesz przeprowadzić symulację, wprowadź zmiany w size: '80%'.
3. odległość: użycie odległości oznacza pokazywanie i odczytywanie dat i znaków, które można zmienić zgodnie z żądaną pozycją.
4. allowPointSelect: domyślną wartością jest wartość false, ale jeśli jest używana, to wykres kołowy znajduje się za wyświetli się po kliknięciu na kawałek przedniego wykresu kołowego.

Kod:

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

wykres kołowy będzie wyglądał jak poniżej: