HighCharts Pasta Grafiği - Her dilimin içine metin ekleme

Question

Öğe ayırmayı temsil eden HighCharts kullanarak bir mali pasta grafiği oluşturuyorum. Amacım, her bir dilimdeki gerçek ayırma değerlerini temsil eden bir grafik oluşturmaktır, ancak her bir slaytta, esas olarak, çeşitli yatırım araçlarının hedef yüzdesini gösteren ikinci bir veri etiketi gösterecektir. Mevcut varlık tahsisinin her zaman hedeflenen tahsis değeriyle uyuşmayabileceğini unutmamak önemlidir.

Her slaydın içindeki Hedef etiketler dışında çalışan her şeyi aldım. iç ve dış datalabels göstermek için

İşte

  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

Bunun jsfiddle ve kodu:

İşte

Ben bugüne kadar ne var: Ben başarmak istiyorum ne için aşağıdaki resme bakın .

bu

1. iki pasta grafik serisini vermek gerekir başarmak için. Biri önden bakıyor olacak ve diğer arkada olacak.
2. Eğer benzetim yapmak istiyorsanız, size: '80%''a değişiklikler yapın.
3. mesafe: uzaklığın kullanılması, içinde bulunduğunuz konuma göre istediğiniz şekilde değiştirebileceğiniz veri çıkışlarını içeri ve dışarı göstermektir.
4. allowPointSelect: bunun varsayılan değeri yanlıştır, ancak bu kullanılırsa, ön pasta grafiğinin dilimine tıklandığında arkada yer alan pasta grafiği gösterilir.

Kodu:

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

Pasta grafik aşağıda benziyordu edilecektir: