हाईचार्ट्स डोनट चार्ट बिना आंतरिक पाई के?

Question

मैं हाईचर लाइब्रेरी के साथ सबसे सरल डोनट चार्ट उत्पन्न करने के लिए समाधान की तलाश कर रहा हूं। हालांकि, हाइचार्ट्स के सभी उदाहरण चार्ट की शैली को आंतरिक पाई और बाहरी डोनट दोनों के साथ दिखाते हैं (http://www.highcharts.com/demo/pie-donut)

मैं आंतरिक पाई से कैसे छुटकारा पा सकता हूं और बाहरी पुस्तकालयों की तरह ही बाहरी डोनट भी रख सकता हूं? (आरजीआरएल: http://www.rgraph.net/examples/donut.html जैसे कुछ)

धन्यवाद।

Answer 1

आपको डेटा को दो तत्व (कुंजी/मान) सरणी के सरणी के रूप में प्रदान करने की आवश्यकता है। डोनट शैली प्राप्त करने के लिए innerSize निर्दिष्ट करें।

... 
data: [["Firefox",6],["MSIE",4],["Chrome",7]], 
innerSize: '20%', 
... 

यहाँ एक jsFiddle of a complete example है:

तो अपने मानकों को कुछ इस तरह शामिल होंगे।

Answer 2

**I hope this example of highchat will solve your problum 

http://jsfiddle.net/e2qpa/3/ 

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 

     plotOptions: { 
      pie: { 
       borderColor: '#000000', 
       innerSize: '60%' 
      } 
     }, 
     series: [{ 
      data: [ 
       ['Firefox', 44.2], 
       ['IE7', 26.6], 
       ['IE6', 20], 
       ['Chrome', 3.1], 
       ['Other', 5.4] 
       ]}] 
    }, 
    // using 

    function(chart) { // on complete 

     var xpos = '50%'; 
     var ypos = '53%'; 
     var circleradius = 102; 

    // Render the circle 
    chart.renderer.circle(xpos, ypos, circleradius).attr({ 
     fill: '#ddd', 
    }).add(); 

    // Render the text 
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({ 
      width: circleradius*2, 
      color: '#4572A7', 
      fontSize: '16px', 
      textAlign: 'center' 
     }).attr({ 
      // why doesn't zIndex get the text in front of the chart? 
      zIndex: 999 
     }).add(); 
    }); 
}); 

Answer 3

यह शीर्ष खोज परिणाम था और दिए गए उत्तरों मेरे लिए काम नहीं करते थे। मुझे केवल एक सरल सरणी की तुलना में डेटा बिंदुओं पर अधिक नियंत्रण की आवश्यकता थी। मुझे विशिष्ट डेटा के लिए स्पष्ट रंग जैसे अतिरिक्त विकल्पों को कॉन्फ़िगर करने के लिए JSON ऑब्जेक्ट्स का उपयोग करने की आवश्यकता थी। मैंने कुछ शोधों के माध्यम से पाया कि आपको अपने डेटा प्रारूप को बिल्कुल संशोधित करने की आवश्यकता नहीं है। डोनट चार्ट में पाई चार्ट बनाने के लिए आपको बस इतना करना है कि डेटा श्रृंखला में 0 से अधिक एक आंतरिक आकार मान सेट करें।

Highcharts प्रलेखन से:

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

तो आप निम्नलिखित की तरह डेटा के साथ एक सरल डोनट चार्ट प्राप्त कर सकते हैं:

 series: [{ 
      innerSize: '30%', 
      data: [ 
       {name: 'Yellow Slice', y: 12, color: 'yellow'}, 
       {name: 'Red Slice', y: 10, color: 'red' }, 
       {name: 'Blue Slice', y: 33, color: 'blue'}, 
       {name: 'Green Slice', y: 20, color: 'green'} 
      ] 
     }] 

JS Fiddle