हाईचार्ट्स - एक चार्ट में एकाधिक पाई चार्ट श्रृंखला के लिए चार्ट नाम

Question

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

यह सब तब तक कोई समस्या नहीं करता जब तक कि मैंने प्रत्येक व्यक्तिगत पाई चार्ट पर लेबल/शीर्षक डालने की कोशिश नहीं की। ऐसा लगता है कि मैं केवल पूरे समूह पर एक शीर्षक प्राप्त कर सकता हूं। देखें jsfiddle

क्या प्रत्येक चार्ट पर शीर्षक रखने का कोई तरीका है?

See above jsfiddle for example 

Answer 1

आप रेंडरर का उपयोग कर सकते हैं जो किसी भी स्थान पर टेक्स्ट जोड़ने की अनुमति देता है।

http://api.highcharts.com/highcharts#Renderer.text()

Answer 2

मैं एक ही समस्या का सामना करना पड़ा, और Highcharts समर्थन मंच के माध्यम से इस समाधान पाया: http://jsfiddle.net/highcharts/tnSRA/

: http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

Highcharts

दोस्त एक प्लगइन है कि आप निम्न jsfiddle पर काम कर देख सकते हैं लिखा है

मैंने इस प्लगइन को एक उच्चचर-प्लगइन्स.जेएस फ़ाइल में कॉपी-पेस्ट किया है जिसे मैंने अपनी वेबसाइट में शामिल किया है, एक आकर्षण की तरह काम करता है!

यहाँ प्लगइन कोड है:

/** 
* Pie title plugin 
* Last revision: 2012-12-21 
*/ 
(function (Highcharts) { 
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) { 

     var chart = this.chart, 
      center = this.center || (this.yAxis && this.yAxis.center), 
      titleOption = this.options.title, 
      box; 

     proceed.call(this); 

     if (center && titleOption) { 
      box = { 
       x: chart.plotLeft + center[0] - 0.5 * center[2], 
       y: chart.plotTop + center[1] - 0.5 * center[2], 
       width: center[2], 
       height: center[2] 
      }; 
      if (!this.title) { 
       this.title = this.chart.renderer.label(titleOption.text) 
        .css(titleOption.style) 
        .add() 
        .align(titleOption, null, box); 
      } else { 
       this.title.align(titleOption, null, box); 
      } 
     } 
    }); 

}(Highcharts)); 

और यह कैसे आप अपने शीर्षक कॉन्फ़िगर (अपने श्रृंखला तत्वों में रखते) है:

title: { 
      // align: 'left', 
      // x: 0 
      // style: { color: XXX, fontStyle: etc } 
      text: '<b>Pie 1</b><br>Subtext', 
      verticalAlign: 'top', 
      y: -40 
     }, 

Answer 3

विन्सेंट जवाब पर सुधार। इस तरह मैंने इसे सरल पाठ शीर्षक के लिए उपयोग किया।

extendHighcharts = function(){ 
     Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) { 

      //Clear the title if added previously 
      //if your chart data does not change, this reference storage for removal can be left out 
      if(this.chart.subChartTitleElement){        
       this.chart.subChartTitleElement[this.id].destroy(); 
      } 

      proceed.call(this); 


      if (this.center && this.options.title) { 


       //first, add the title, at center or anywhere, we need the container width to center it 
       this.chart.subChartTitleElement[this.id] = this.chart.renderer.text(this.options.title.text,this.center[0],this.center[1]); 
       this.chart.subChartTitleElement[this.id].css(this.options.title.style) 
       this.chart.subChartTitleElement[this.id].add(); 

       //Center the title using the container(Bounding Box = BBox) width 
       var xCenter = this.chart.plotLeft + this.center[0] - (this.chart.subChartTitleElement[this.id].getBBox().width/2), 
        yCenter = this.chart.plotTop + this.center[1] - 0.6 * this.center[2]; 

       this.chart.subChartTitleElement[this.id].attr(
           { 
            x:xCenter, 
            y:yCenter 
           } 
       ); 

       } 
      }); 
    } 

उपयोग

    this.chart.addSeries({ 
         type: 'pie', 
         name: 'pie_chart_1', 
         data: pieChartData, 
         center: ['80%','25%'], 
         size: '35%', 
         showInLegend: false, 
         dataLabels: { 
          enabled: false 
         }, 

         //this part adds the relevant information 
         title: { 
          text:'Pie Chart Title', 
          verticalAlign: 'top', 
          y: -40 
         }, 
         id:'a_unique_id_or_name' 
        }); 

Answer 4

आगे इस पर सुधार करने के लिए, नीचे दिए गए कोड को सही ढंग से छोड़ दिया हैंडल, केंद्र, और खिताब के लिए सही औचित्य। उदाहरण के लिए http://jsfiddle.net/9y4Lj4yr/ पर बेवकूफ देखें।

/** 
* Pie title plugin 
* Last revision: 2015-5-20 
*/ 
(function (Highcharts) { 
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) { 

     var chart = this.chart, 
     center = this.center || (this.yAxis && this.yAxis.center), 
     titleOption = this.options.title, 
     box; 

     proceed.call(this); 

     if (center && titleOption) { 
      box = { 
       x: chart.plotLeft + center[0] - 0.5 * center[2], 
       y: chart.plotTop + center[1] - 0.5 * center[2], 
       width: center[2], 
       height: center[2] 
      }; 
      if (!this.title) { 
       this.title = this.chart.renderer.label(titleOption.text) 
       .css(titleOption.style) 
       .add() 
      } 
      var labelBBox = this.title.getBBox(); 
      if (titleOption.align == "center") 
       box.x -= labelBBox.width/2; 
      else if (titleOption.align == "right") 
       box.x -= labelBBox.width; 
      this.title.align(titleOption, null, box); 
     } 
    }); 

} (Highcharts));