javascript - चार्ट.जेएस में प्रत्येक टुकड़ा के पाई चार्ट डेटा वैल्यू कैसे प्रदर्शित करें




php jquery (4)

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

function drawSegmentValues()
{
    for(var i=0; i<myPieChart.segments.length; i++) 
    {
        // Default properties for text (size is scaled)
        ctx.fillStyle="white";
        var textSize = canvas.width/10;
        ctx.font= textSize+"px Verdana";

        // Get needed variables
        var value = myPieChart.segments[i].value;
        var startAngle = myPieChart.segments[i].startAngle;
        var endAngle = myPieChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        // Text offside to middle of text
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}

एक पाई चार्ट में PieChart.segments में संग्रहीत सेगमेंट हैं, हम बीच के कोण को यह निर्धारित करने के लिए इन दोनों खंडों के startAngle और endAngle को देख सकते हैं, जहां टेक्स्ट middleAngle होगा। फिर हम उस दिशा में Radius/2 तरफ रेडियंस में चार्ट के मध्य बिंदु पर चलेंगे।

कुछ अन्य क्लीन अप के ऊपर दिए गए उदाहरण में, दाएं कोने में fillText() पाठ की स्थिति के कारण, हमें इसके लिए सही करने के लिए कुछ ऑफसेट मान प्राप्त करने होंगे। और अंत में टेक्स्ट साइज़ को चार्ट के आकार के आधार पर निर्धारित किया जाता है, बड़ा चार्ट टेक्स्ट बड़ा होता है

बेला उदाहरण

कुछ मामूली संशोधन के साथ आप एक ग्राफ़ में एक डाटासेट के लिए असतत संख्या मानों को प्रतिशत्य संख्या में बदल सकते हैं। ऐसा करने के लिए अपने डेटासेट में आइटमों का कुल value प्राप्त करें, इस कुल कॉल को कॉल करें। फिर प्रत्येक सेगमेंट पर आप कर कर प्रतिशत पा सकते हैं:

Math.round(myPieChart.segments[i].value/totalValue*100)+'%';

यहां अनुभाग myPieChart.segments[i].value/totalValue वह प्रतिशत गणना करता है जो खंड में चार्ट को ऊपर ले जाता है। उदाहरण के लिए यदि वर्तमान खंड में 50 मान था और कुल वैल्यू 200 था। तब वह प्रतिशत जो कि सेगमेंट ने उठाया था: 50/200 => 0.25 आराम करने के लिए यह अच्छा लग रहा है 0.25*100 => 25 , फिर हम अंत में एक % जोड़ते हैं। पूरे नंबर टाइल के लिए मैं निकटतम पूर्णांक पर गोल कर लिया, हालांकि सटीकता के साथ समस्याओं को जन्म दे सकता है। यदि हमें अधिक सटीकता की आवश्यकता है तो आप दशमलव स्थानों को सहेजने के लिए। .toFixed(n) का उपयोग कर सकते हैं। उदाहरण के लिए, हम ऐसा करते समय एक दशमलव दशमलव स्थान को बचा सकते हैं:

var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
    value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';

दशमांश के साथ शतमक का उदाहरण

पूर्णांक के साथ पट्टेदार का उदाहरण

मैं अपने php पेज में पाइ चार्ट को चित्रित करने के लिए चार्ट.जेएस का उपयोग कर रहा हूं। मुझे प्रत्येक टुकड़ा मूल्य दिखाने के रूप में टूलटिप मिला है।

लेकिन मैं उन छवियों को प्रदर्शित करना चाहूंगा जैसे छवि नीचे।

मुझे नहीं पता कि यह कैसे chart.js के साथ करना है

क्रिप्या मेरि सहायता करे।

मेरा जावास्क्रिप्ट कोड:

function drawPie(canvasId,data,legend){
    var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");

    var piedata = [];
    $.each(data,function(i,val){
        piedata.push({value:val.count,color:val.color,label:val.status});
    });
    var options =
    {
        tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
    }
    var pie = new Chart(ctx).Pie(piedata,options);
    if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
}

php कोड:

printf('<table><tr>');
echo '<td style="text-align: right;"><canvas id="pie-canvas-'
    . $canvasId
    . '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';

     echo '<script type="text/javascript">drawPie('
    . $canvasId
    . ', '
    . $data3
    .', '
    . $legend
    . ');</script>';


चार्ट के लिए। जेएस 2.0 और ऊपर, चार्ट वस्तु डेटा बदल गया है। चार्ट के उपयोग करने वाले लोगों के लिए नीचे दिए गए डेटा मान को पाई स्लाइस के अंदर प्रदर्शित करने के लिए एचटीएमएल 5 कैनवास fillText() पद्धति का उपयोग करने का एक उदाहरण नीचे दिया गया है। यह कोड डोनट चार्ट के लिए भी काम करता है, इसके साथ ही फर्क सिर्फ इतना ही type: 'pie' बनाम type: 'doughnut' चार्ट बनाते समय

स्क्रिप्ट:

जावास्क्रिप्ट

var data = {
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};

var pieOptions = {
  events: false,
  animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function () {
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';

      this.data.datasets.forEach(function (dataset) {

        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
              total = dataset._meta[Object.keys(dataset._meta)[0]].total,
              mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
              start_angle = model.startAngle,
              end_angle = model.endAngle,
              mid_angle = start_angle + (end_angle - start_angle)/2;

          var x = mid_radius * Math.cos(mid_angle);
          var y = mid_radius * Math.sin(mid_angle);

          ctx.fillStyle = '#fff';
          if (i == 3){ // Darker text color for lighter background
            ctx.fillStyle = '#444';
          }
          var percent = String(Math.round(dataset.data[i]/total*100)) + "%";
          ctx.fillText(dataset.data[i], model.x + x, model.y + y);
          // Display percent in another line, line break doesn't work for fillText
          ctx.fillText(percent, model.x + x, model.y + y + 15);
        }
      });               
    }
  }
};

var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pieOptions
});

एचटीएमएल

<canvas id="pieChart" width=200 height=200></canvas>

jsFiddle



आप Chart.js के लिए पाइसेलेबल प्लग इन का उपयोग कर सकते हैं

{टुकड़ा लेबल: {मोड: 'प्रतिशत', सटीक: 2}}

डेमो | प्रलेखन





charts