चार्ट.जेएस में डोनट चार्ट में एक लेबल जोड़ना प्रत्येक चार्ट में सभी मानों को दिखाता है

Question

मैं अपनी साइट पर चार्ट की एक श्रृंखला खींचने के लिए चार्ट.जेएस का उपयोग कर रहा हूं और मैंने अलग-अलग चार्ट आसानी से आकर्षित करने के लिए एक सहायक विधि लिखी है:

drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel) { 
    var ctx = ctxElement; 
    var data = { 
     labels: ctxDataLabels, 
     datasets: ctxDataSets 
    }; 

    Chart.pluginService.register({ 
     beforeDraw: function(chart) { 
      var width = chart.chart.width, 
       height = chart.chart.height, 
       ctx = chart.chart.ctx; 

      ctx.restore(); 
      var fontSize = (height/114).toFixed(2); 
      ctx.font = fontSize + "em sans-serif"; 
      ctx.textBaseline = "middle"; 

      var text = midLabel, 
       textX = Math.round((width - ctx.measureText(text).width)/2), 
       textY = height/2; 

      ctx.fillText(text, textX, textY); 
      ctx.save(); 
     } 
    }); 

    var chart = new Chart(ctx, { 
     type: ctxType, 
     data: data, 
     options: { 
      legend: { 
       display: false 
      }, 
      responsive: true 
     } 
    }); 
} 

drawChart() विधि के लिए अंतिम पैरामीटर में वह लेबल होता है जो चार्ट के मध्य में जोड़ा जाना चाहिए। Chart.pluginService.register हिस्सा वह कोड है जो लेबल खींचता है। समस्या यह है कि जब मैं drawChart विधि को कई बार निष्पादित करता हूं (मेरे मामले में तीन बार) और विधि निष्पादन में प्रत्येक चार्ट के लेबल की आपूर्ति करता है, तो सभी तीन लेबल प्रत्येक चार्ट पर एक दूसरे के शीर्ष पर दिखाए जाते हैं। मुझे संबंधित लेबल में प्रत्येक लेबल को प्रदर्शित करने की आवश्यकता है। लेबल के अलावा, अन्य सभी पैरामीटर सही ढंग से संभाले जाते हैं।

मैं इसे कैसे प्राप्त करूं?

Answer 1

एक आसान कामकाज एक दूसरे से अपने चार्ट को अलग करने के लिए अपने फ़ंक्शन में एक और पैरामीटर जोड़ना है।

मैंने इसके लिए चार्ट की आईडी का उपयोग करना चुना, ताकि आप सुनिश्चित हों कि आप किसी अन्य को प्रभावित नहीं करेंगे।

आप पहली बार एक छोटा सा अपने कार्य को संपादित करने की जरूरत:

// ids need to be 0, 1, 2, 3 ... 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 1", 0); 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 2", 1); 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 3", 2); 

---

आप:

// !! 
// Don't forget to change the prototype 
// !! 
function drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel, id) { 
    var ctx = ctxElement; 
    var data = { 
     labels: ctxDataLabels, 
     datasets: ctxDataSets 
    }; 

    Chart.pluginService.register({ 
     afterDraw: function(chart) { 
      // Makes sure you work on the wanted chart 
      if (chart.id != id) return; 

      // From here, it is the same as what you had 

      var width = chart.chart.width, 
       height = chart.chart.height, 
       ctx = chart.chart.ctx; 

      // ... 
     } 
    }); 

    // ... 
} 

अब से, जब आप अपने फ़ंक्शन को कॉल करें, आईडी के बारे में भूल नहीं है this fiddle (3 चार्ट के साथ) पर एक पूरी तरह से काम कर रहे उदाहरण देख सकते हैं, और यहां एक पूर्वावलोकन है: