हाईचर्ट्स पाई चार्ट - प्रत्येक स्लाइस के अंदर टेक्स्ट जोड़ें

Question

मैं उच्च आवंटन का उपयोग कर वित्तीय पाई चार्ट बना रहा हूं जो संपत्ति आवंटन का प्रतिनिधित्व करता है। मेरा लक्ष्य एक चार्ट बनाना है जो प्रत्येक टुकड़े में वास्तविक आवंटन मानों का प्रतिनिधित्व करता है लेकिन प्रत्येक स्लाइड के अंदर अनिवार्य रूप से एक दूसरा डेटा लेबल दिखाया जाएगा जो विभिन्न निवेश वाहनों के लिए लक्ष्य प्रतिशत प्रदर्शित करता है। यह ध्यान रखना महत्वपूर्ण है कि वर्तमान परिसंपत्ति आवंटन हमेशा लक्षित आवंटन मूल्य से मेल नहीं खा सकता है।

मुझे प्रत्येक स्लाइड के अंदर लक्ष्य लेबल को छोड़कर काम कर रहा सब कुछ मिल गया है।

  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

यहाँ इस के लिए jsfiddle है और कोड के अंदर और बाहर datalabels को दिखाने के लिए:

यहाँ मैं अब तक किया है: मैं पूरा करना चाहते हैं लिए नीचे चित्र देखें ।

प्राप्त करने के लिए इस

1. आप दो पाइ चार्ट श्रृंखला देने के लिए की जरूरत है। एक आगे देखेगा और दूसरा वापस आ जाएगा।
2. यदि आप इसे अनुकरण करना चाहते हैं तो size: '80%' में परिवर्तन करें।
3. दूरी: दूरी का उपयोग datalabels को दिखाने के लिए है और बाहर आप जो बदल सकते हैं उसके अनुसार आप बदल सकते हैं।
4. allowPoint चयन करें: इसका डिफ़ॉल्ट मान गलत है लेकिन यदि इसका उपयोग किया जाता है तो पाई चार्ट पीछे रहता है, सामने वाले पाई चार्ट के टुकड़े पर क्लिक करने पर दिखाया जाएगा।

कोड:

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

पाई चार्ट के नीचे की तरह देखा जाएगा: