javascript - वही<canvas> में अन्य आलेख redraw करने के लिए chart.js बार आलेख को नष्ट करें




graph (2)

एक ही कैनवास पर एक और चार्ट को आकर्षित करने के लिए, उपयोग करने के लिए सही विधि है। .destroy() । आपको इसे पहले बनाए गए चार्ट ऑब्जेक्ट पर कॉल करना चाहिए। आप दोनों चार्ट के लिए एक ही चर का उपयोग भी कर सकते हैं।

var grapharea = document.getElementById("barChart").getContext("2d");

var myChart = new Chart(grapharea, { type: 'bar', data: barData, options: barOptions });

myChart.destroy();

myChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

डॉक्स से सीधे (प्रोटोटाइप मेथड के अंतर्गत) :

.destroy ()

इसका उपयोग किसी भी चार्ट इंस्टेंस को नष्ट करने के लिए करें। यह chart.js के भीतर चार्ट ऑब्जेक्ट में संग्रहित किसी भी संदर्भ को साफ करेगा, साथ ही चार्ट.जेएस द्वारा जुड़ी किसी भी संबद्ध ईवेंट श्रोताओं के साथ। एक नए चार्ट के लिए कैनवास का पुन: उपयोग करने से पहले इसे बुलाया जाना चाहिए।

// Example from the docs
var myLineChart = new Chart(ctx, config);
// Destroys a specific chart instance
myLineChart.destroy();

यह स्पष्ट रूप से बताता है कि इस विधि को एक नए चार्ट के लिए कैनवास का पुन: उपयोग किया जा सकता है।

.clear() को बाद में उसी खंड में भी कहा गया है, जो कि समारोह के रूप में "चार्ट कैनवास साफ़ करेगा। एनीमेशन फ़्रेमों के बीच बड़े पैमाने पर आंतरिक रूप से उपयोग किया जाता है, लेकिन आप इसे उपयोगी पा सकते हैं।" इस पद्धति को कॉल करने के बाद चार्ट जीवित होगा और अच्छी तरह से होगा, इसलिए यह कॉल करने का तरीका नहीं है, यदि आप एक नया चार्ट के लिए कैनवास का पुन: उपयोग करना चाहते हैं।

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

मैं चार्ट ग्राफ़ को आकर्षित करने के लिए चार्ट.जेएस लाइब्रेरी का उपयोग कर रहा हूं, यह ठीक काम कर रहा है, लेकिन अब मैं बार ग्राफ़ को नष्ट करना चाहता हूं और उसी कैनवास में एक रेखाचित्र बनाना चाहता हूं। मैंने कैनवास साफ़ करने के लिए इन दो तरीकों की कोशिश की है:

var grapharea = document.getElementById("barChart").getContext("2d");

grapharea.destroy();

var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

दूसरा रास्ता:

var grapharea = document.getElementById("barChart").getContext("2d");

grapharea.clear();

var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

क्या मैं इसे सही कह रहा हूँ? OnButtonClick मैं इस फ़ंक्शन को कॉल करता हूं जो एक ही कैनवास का उपयोग करता है।


हर चार्ट कॉल के बाद कैनवास निकालें, यह मेरे लिए काम किया

$("canvas#chartreport").remove();
$("div.chartreport").append('<canvas id="chartreport" class="animated fadeIn" height="150"></canvas>');
var ctx = document.getElementById("chartreport").getContext("2d");
chartreport= new Chart(ctx, { .... });




chart.js