একটি ক্যানভাস থেকে কীভাবে একটি চার্ট সাফ করবেন যাতে ইভেন্টগুলির ট্রিগার করা না যায়?

Question

আমি লাইন চার্ট প্রদর্শন করতে চার্টজ ব্যবহার করছি এবং এটি দুর্দান্ত কাজ করে:

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);

আমি যখন চার্টের ডেটা পরিবর্তন করার চেষ্টা করি তখনই সমস্যাটি দেখা দেয়। আমি নতুন ডেটা পয়েন্টগুলির সাথে একটি চার্টের একটি নতুন উদাহরণ তৈরি করে এবং এভাবে ক্যানভাসটিকে পুনরায় নতুন করে গ্রাফটি আপডেট করি।

এটি কাজ করে। যাইহোক, আমি যখন নতুন চার্টের ওপরে ঘোরাফেরা করি, আমি যদি পুরানো চার্টে প্রদর্শিত পয়েন্টগুলির সাথে সুনির্দিষ্ট অবস্থানগুলিতে যেতে পারি তবে হোভার / লেবেলটি এখনও ট্রিগার হয়ে যায় এবং হঠাৎই পুরানো চার্টটি দৃশ্যমান হয়। আমার মাউস এই অবস্থানে থাকাকালীন এটি দৃশ্যমান থাকবে এবং সেই বিন্দুটি সরে গেলে অদৃশ্য হয়ে যায়। আমি পুরানো চার্টটি প্রদর্শন করতে চাই না। আমি এটি পুরোপুরি অপসারণ করতে চাই।

আমি নতুনটি লোড করার আগে ক্যানভাস এবং বিদ্যমান চার্ট উভয়ই সাফ করার চেষ্টা করেছি। ভালো লেগেছে:

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);

এবং

chart.clear();

তবে এর মধ্যে এখনও কোনওটিই কাজ করেনি। আমি কীভাবে এটি ঘটতে বাধা দিতে পারি সে সম্পর্কে কোনও ধারণা?

Comments

বাবু, এই সমস্যাটি হ'ল ঠিক আমার। "ধ্বংস ()" পদ্ধতিটি কাজ করে না এবং এটি আমাকে বিস্ফোরিত করছে।

— নিউজ মিউজিক

আমি কী জিজ্ঞাসা করতে পারি আপনি কীভাবে চার্ট অবজেক্টে অ্যাক্সেস পাচ্ছেন? আমার একই সমস্যা হচ্ছে, আমি একটি চার্ট তৈরি করি এবং তারপরে একটি বোতাম ক্লিকের হ্যান্ডলিংয়ের সময় আমাকে এটি ধ্বংস করতে হবে তবে এটি সম্পূর্ণ আলাদা ফাংশনে রয়েছে এবং আমি ক্যানভাস বা প্রসঙ্গের মাধ্যমে চার্ট অবজেক্টে অ্যাক্সেসের কোনও উপায় খুঁজে পাই না অবজেক্ট।

— ম্যাট উইলিয়ামস

এই সমস্যার জন্য একটি বাগ খোলা আছে, এটি এখানে দেখুন। github.com/jtblin/angular-chart.js/issues/187

— MDT

এই সমস্যা ছিল। স্ট্যাকওভারফ্লো.com

— ক্রিস

Answer 1

আমার এ নিয়ে বিশাল সমস্যা ছিল

প্রথমে চেষ্টা করেছি .clear()তারপর চেষ্টা করেছি.destroy() এবং আমি আমার চার্টের রেফারেন্সটি নালায় সেট করার চেষ্টা করেছি

যা শেষ পর্যন্ত আমার জন্য সমস্যাটি স্থির করেছে: <canvas>উপাদানটি মোছা এবং তারপরে পিতামাতার ধারকটিতে একটি নতুন পুনরায় সরবরাহ <canvas>করা

---

আমার নির্দিষ্ট কোড (অবশ্যই এটির লক্ষ লক্ষ উপায় আছে):

var resetCanvas = function(){
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph');
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height
  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

Comments

চ্যাম্পের মতো কাজ করেছেন। যদি কেউ জানে যে Chart.js সংস্করণ 2 এটি ঠিক করে দেয় তবে এটি এখানে পোস্ট করুন। আমি ভাবছি ধ্বংসটি যদি ভেঙে যায় বা আমরা যদি এটি ভুলভাবে ব্যবহার করি।

— দি লেলেটসমাস্টার

নিস! ধন্যবাদ! আমি সবেমাত্র added ('# ফলাফল-গ্রাফ') যুক্ত করেছি remove '(' # গ্রাফ-ধারক ')। সংযোজন (' <ক্যানভাস আইডি = "ফলাফল-গ্রাফ"> <ক্যানভাস> '); চার্ট তৈরির আগে।

— ইগনাসিও

.destroy () ভাল কাজ করা উচিত। যদি এটি না হয়, নতুন চার্ট আঁকার জন্য .destroy () কল করার পরে, সেটটাইমআউট () ব্যবহার করুন

— কালে

এটিই একমাত্র সমাধান আমার জন্য অনেক ধন্যবাদ কাজ করেছে, তবে প্রস্থ এবং উচ্চতার জন্য যদি আপনি ইতিমধ্যে তাদের স্থির করে রেখেছেন তবে আপনাকে সেগুলি পুনরায় সেট করার ফাংশনে একই

— মানটিতে

চার্জ ২.৮.০ সহ আমার জন্য ধ্বংস () ব্যর্থ হয়েছে তবে আপনার সমাধানটি কেবল কার্যকর হয়েছে! আমার ক্ষেত্রে আমি শুধু ব্যবহার করা $('#results-graph').remove(); $('#graph-container').append('<canvas id="results-graph"><canvas>');আগেnew Chart(document.getElementById("myCanvas")

— Mimi

Answer 2

কয়েক ঘন্টা আগেও আমি একই সমস্যার মুখোমুখি হয়েছি।

".সিয়ার ()" পদ্ধতিটি আসলে ক্যানভাস পরিষ্কার করে, তবে (স্পষ্টতই) এটি বস্তুকে জীবন্ত এবং প্রতিক্রিয়াশীল রেখে দেয়।

অফিসিয়াল ডকুমেন্টেশন সাবধানে পড়া , "উন্নত ব্যবহার" বিভাগে, আমি নীচে বর্ণিত পদ্ধতি ".ডাস্ট্রয় ()" লক্ষ্য করেছি:

"এটি তৈরি হওয়া যেকোনো চার্ট উদাহরণকে ধ্বংস করতে এটি ব্যবহার করুন This এটি Chart.js এর সাথে যুক্ত কোনও ইভেন্ট শ্রোতার পাশাপাশি Chart.js এর মধ্যে চার্ট অবজেক্টে সঞ্চিত কোনও রেফারেন্স পরিষ্কার করবে।"

এটি আসলে যা দাবি করে তা করে এবং এটি আমার পক্ষে ভাল কাজ করেছে, আমি আপনাকে এটি চেষ্টা করার পরামর্শ দিচ্ছি।

Comments

আপনি একটি উদাহরণ দেখাতে পারেন? আমি একাধিকবার ব্লকিং ব্যবহার করার চেষ্টা করেছি এবং এটি কখনই কার্যকর হয় না। আমি সর্বদা একটি ত্রুটি পাই যে পদ্ধতিটির অস্তিত্ব নেই।

— বেন হফম্যান

(<ChartInstance> this.chart) .ডাস্ট্রয় ();

— ডেভিড ডাল বাসকো

এটি সঠিক উত্তরদাতা z ভবিষ্যতের রেফারেন্সের জন্য, দেখুন: stackoverflow.com/questions/40056555/...

— ThePhi

Answer 3

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

Comments

এটি সেরা বিকল্প

— রাফাশী

ভাল একটা. ধন্যবাদ

— মঞ্জুনাথ সিদ্ধ্প্পা

Answer 4

এটিই আমার পক্ষে কাজ করেছে:

document.getElementById("chartContainer").innerHTML = ' ';
document.getElementById("chartContainer").innerHTML = '<canvas id="myCanvas"></canvas>';
var ctx = document.getElementById("myCanvas").getContext("2d");

Answer 5

আমার এখানেও একই সমস্যা ছিল ... আমি ধ্বংস () এবং পরিষ্কার () পদ্ধতি ব্যবহার করার চেষ্টা করেছি, তবে সাফল্য না পেয়ে।

আমি এটি পরবর্তী উপায়ে সমাধান করেছি:

এইচটিএমএল:

<div id="pieChartContent">
    <canvas id="pieChart" width="300" height="300"></canvas>
</div>

javascript:

var pieChartContent = document.getElementById('pieChartContent');
pieChartContent.innerHTML = ' ';
$('#pieChartContent').append('<canvas id="pieChart" width="300" height="300"><canvas>');

ctx = $("#pieChart").get(0).getContext("2d");        
var myPieChart = new Chart(ctx).Pie(data, options);

এটি আমার পক্ষে নিখুঁত কাজ করে ... আমি আশা করি এটি সাহায্য করবে।

Answer 6

এটি আমার পক্ষে খুব ভাল কাজ করেছে

    var ctx = $("#mycanvas");
     var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata});
        LineGraph.destroy();

তৈরি করা যেকোন চার্ট উদাহরণ নষ্ট করতে এটি .ডেস্ট্রয় ব্যবহার করুন । এটি Chart.js এর মধ্যে চার্ট অবজেক্টে সঞ্চিত যে কোনও রেফারেন্স এবং Chart.js দ্বারা সংযুক্ত কোনও ইভেন্ট শ্রোতার সাথে পরিষ্কার করবে। নতুন চার্টের জন্য ক্যানভাস পুনরায় ব্যবহার করার আগে এটি অবশ্যই ডাকতে হবে।

Comments

এইভাবে আমার জন্য সঠিকভাবে কাজ করুন, দেখে মনে হচ্ছে এটি হোভার কলব্যাকগুলি ধ্বংস করে। ট্যাঙ্কগুলি অনেক বেশি !!

— এন্টোইন পয়েন্টেউ

Answer 7

আমরা Chart.js V2.0 এ চার্ট ডেটা আপডেট করতে পারি:

var myChart = new Chart(ctx, data);
myChart.config.data = new_data;
myChart.update();

Comments

আমি এর থেকে আরও ভাল সমাধান হিসাবে একমত - ধ্বংসকে বন্যার সাথে খুব মৌলবাদী করা হয়, যখন আমরা সত্যই চাই কেবল "ডেটা" পুনরায় চালু করা হয় rest

— টিএস

Answer 8

ক্যানভাস জেএস ব্যবহার করে, এটি আমার জন্য ক্লিয়ারিং চার্ট এবং অন্যান্য সমস্ত কিছুর জন্য কাজ করে, অন্য যে কোনও জায়গায় প্রতিটি প্রসেসিংয়ের আগে আপনার ক্যানভাস / চার্টকে পুরোপুরি সেট আপ করে দিয়ে মঞ্জুরি দেয়:

var myDiv= document.getElementById("my_chart_container{0}";
myDiv.innerHTML = "";

Comments

আমার জন্য উপরোক্ত পদ্ধতিগুলির কোনওটিই কাজ করে না। এটি পুরোপুরি কাজ করে। অনেক ধন্যবাদ.

— শুরু

Answer 9

আমি .destroy () কোনওভাবে কাজ করতে পারি না তাই এটিই আমি করছি। চার্ট_পরিচয় ডিভটি যেখানে আমি ক্যানভাসটি দেখাতে চাই। আমার প্রতিবার আকার পরিবর্তন করতে ক্যানভাস দরকার, সুতরাং এই উত্তরটি উপরেরটির একটি বর্ধন।

এইচটিএমএল:

<div class="main_section" > <div id="chart_parent"></div> <div id="legend"></div> </div>

jQuery:

  $('#chart').remove(); // this is my <canvas> element
  $('#chart_parent').append('<label for = "chart">Total<br /><canvas class="chart" id="chart" width='+$('#chart_parent').width()+'><canvas></label>');

Answer 10

আপনি যখন একটি নতুন চার্ট.জেএস ক্যানভাস তৈরি করেন, এটি একটি নতুন আইফ্রেমে গোপন তৈরি করে, আপনার ক্যানভাস এবং পুরানো আইফ্রেমগুলি মুছতে হবে।

$('#canvasChart').remove(); 
$('iframe.chartjs-hidden-iframe').remove(); 
$('#graph-container').append('<canvas id="canvasChart"><canvas>'); 
var ctx = document.getElementById("canvasChart"); 
var myChart = new Chart(ctx, { blablabla });

তথ্যসূত্র: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html

Answer 11

এটি আমার পক্ষে কাজ করেছে। আপনার আপডেটচার্ট () এর শীর্ষে শীর্ষে ক্লিয়ারচার্টে একটি কল যুক্ত করুন

`function clearChart() {
    event.preventDefault();
    var parent = document.getElementById('parent-canvas');
    var child = document.getElementById('myChart');          
    parent.removeChild(child);            
    parent.innerHTML ='<canvas id="myChart" width="350" height="99" ></canvas>';             
    return;
}`

Answer 12

আপনি যদি টাইপস্ক্রিপ্ট সহ একটি কৌণিক প্রকল্পে চার্ট.জেএস ব্যবহার করছেন, আপনি নিম্নলিখিতগুলি চেষ্টা করতে পারেন;

Import the library:
    import { Chart } from 'chart.js';

In your Component Class declare the variable and define a method:

  chart: Chart;

  drawGraph(): void {
    if (this.chart) {
      this.chart.destroy();
    }

    this.chart = new Chart('myChart', {
       .........
    });
  }


In HTML Template:
<canvas id="myChart"></canvas>

Answer 13

আমরা যা করেছি তা হ'ল নতুন চার্ট শুরু করার আগে পূর্বরূপগুলি সরান / ধ্বংস করুন চার্ট উদাহরণটি যদি ইতিমধ্যে উপস্থিত থাকে তবে একটি নতুন চার্ট তৈরি করুন, উদাহরণস্বরূপ

if(myGraf != undefined)
    myGraf.destroy();
    myGraf= new Chart(document.getElementById("CanvasID"),
    { 
      ...
    }

আশাকরি এটা সাহায্য করবে.

Answer 14

আদম এর উত্তর পরিপূরক

ভ্যানিলা জেএস সহ:

document.getElementById("results-graph").remove(); //canvas
div = document.querySelector("#graph-container"); //canvas parent element
div.insertAdjacentHTML("afterbegin", "<canvas id='results-graph'></canvas>"); //adding the canvas again

Answer 15

2020-এর জন্য সাধারণ সম্পাদনা:

এটি আমার পক্ষে কাজ করেছে। (থেকে ঘোষণা পরিবর্তন তা মালিকানাধীন উইন্ডোতে করে বিশ্বব্যাপী চার্ট পরিবর্তন করুন var myChartথেকে window myChart)

চার্ট ভেরিয়েবলটি ইতিমধ্যে চার্ট হিসাবে আরম্ভ করা হয়েছে কিনা তা পরীক্ষা করুন, যদি তা হয় তবে এটি নষ্ট করুন এবং একটি নতুন তৈরি করুন, এমনকি আপনি একই নামে অন্য একটি তৈরি করতে পারেন। নীচে কোডটি দেওয়া হল:

if(window.myChart instanceof Chart)
{
    window.myChart.destroy();
}
var ctx = document.getElementById('myChart').getContext("2d");

আশা করি এটা কাজ করবে!

Comments

অনেক ধন্যবাদ. এটি আমার পক্ষে কাজ করে।

— দান্তে

Answer 16

আমার জন্য এটি কাজ করেছে:

		var in_canvas = document.getElementById('chart_holder');
	//remove canvas if present
			while (in_canvas.hasChildNodes()) {
				  in_canvas.removeChild(in_canvas.lastChild);
				} 
	//insert canvas
			var newDiv = document.createElement('canvas');
			in_canvas.appendChild(newDiv);
			newDiv.id = "myChart";

Answer 17

Chart.js এর একটি ত্রুটি রয়েছে: Chart.controller(instance)বৈশ্বিক সম্পত্তিতে যে কোনও নতুন চার্ট নিবন্ধিত Chart.instances[]করে এবং এই সম্পত্তি থেকে এটি মুছে ফেলা হয়.destroy() ।

কিন্তু চার্ট তৈরিতে Chart.js ._metaডেটাসেট ভেরিয়েবলের জন্য সম্পত্তিও লিখে :

var meta = dataset._meta[me.id];
if (!meta) {
   meta = dataset._meta[me.id] = {
       type: null,
       data: [],
       dataset: null,
       controller: null,
       hidden: null,     // See isDatasetVisible() comment
       xAxisID: null,
       yAxisID: null
   };

এবং এটি এই সম্পত্তিটি মুছে দেয় না destroy()।

আপনি যদি পুরানো ডেটাসেট অবজেক্টটি অপসারণ না করে ব্যবহার করেন ._meta property, Chart.js এতে নতুন ডেটাসেট যুক্ত করবে._meta পূর্ববর্তী ডেটা মোছা ছাড়াই । সুতরাং, প্রতিটি চার্টের পুনঃ-সূচনাতে আপনার ডেটাসেট অবজেক্টটি পূর্ববর্তী সমস্ত ডেটা সংগ্রহ করে।

এটি এড়াতে, কল করার পরে ডেটাসেট অবজেক্টটি ধ্বংস করুন Chart.destroy()।

Answer 18

যেহেতু ধরণের ধরণের "সবকিছু" ধ্বংস করে দেয়, তাই একটি সত্য এবং সহজ সমাধান যখন আপনি সত্যিকার অর্থে চান কেবল "ডেটা পুনরায় সেট করা"। খালি অ্যারেতে আপনার ডেটাসেটগুলি পুনরায় সেট করা ঠিক তত ভালভাবে কাজ করবে। সুতরাং, যদি আপনার কাছে লেবেলগুলির সাথে একটি ডেটাসেট এবং প্রতিটি পাশে অক্ষ থাকে:

window.myLine2.data.labels = [];
window.myLine2.data.datasets[0].data = [];
window.myLine2.data.datasets[1].data = [];

এর পরে, আপনি কেবল কল করতে পারেন:

window.myLine2.data.labels.push(x);
window.myLine2.data.datasets[0].data.push(y);

বা, আপনি 2 ডি ডেটাसेट ব্যবহার করছেন কিনা তা নির্ভর করে:

window.myLine2.data.datasets[0].data.push({ x: x, y: y});

আপনার পুরো চার্ট / ডেটাসেটকে সম্পূর্ণরূপে ধ্বংস করা এবং সবকিছু পুনর্নির্মাণের চেয়ে এটি আরও অনেক বেশি হালকা হবে।

Answer 19

যারা আমার পছন্দ করেন তাদের জন্য বেশ কয়েকটি গ্রাফিক্স তৈরি করতে একটি ফাংশন ব্যবহার করেন এবং সেগুলি একটি ব্লকও আপডেট করতে চান, কেবলমাত্র ফাংশন .ডাস্ট্রয়ে () আমার পক্ষে কাজ করেছিল, আমি একটি। আপডেট () তৈরি করতে পছন্দ করতাম, যা পরিষ্কার মনে হয় তবে .. এখানে একটি কোড স্নিপেট যা সাহায্য করতে পারে।

var SNS_Chart = {};

// IF LABELS IS EMPTY (after update my datas)
if( labels.length != 0 ){

      if( Object.entries(SNS_Chart).length != 0 ){

            array_items_datas.forEach(function(for_item, k_arr){
                SNS_Chart[''+for_item+''].destroy();
            });

       }

       // LOOP OVER ARRAY_ITEMS
       array_items_datas.forEach(function(for_item, k_arr){

             // chart
             OPTIONS.title.text = array_str[k_arr];
             var elem = document.getElementById(for_item);
             SNS_Chart[''+for_item+''] = new Chart(elem, {
                 type: 'doughnut',
                 data: {
                     labels: labels[''+for_item+''],
                     datasets: [{
                        // label: '',
                        backgroundColor: [
                            '#5b9aa0',
                            '#c6bcb6',
                            '#eeac99',
                            '#a79e84',
                            '#dbceb0',
                            '#8ca3a3',
                            '#82b74b',
                            '#454140',
                            '#c1502e',
                            '#bd5734'
                        ],
                        borderColor: '#757575',
                        borderWidth : 2,
                        // hoverBackgroundColor : '#616161',
                        data: datas[''+for_item+''],
                     }]
                 },
                 options: OPTIONS

             });
             // chart
       });
       // END LOOP ARRAY_ITEMS

  }
 // END IF LABELS IS EMPTY ...