Как очистить диаграмму от холста, чтобы не запускались события зависания?

Я использую Chartjs для отображения линейной диаграммы, и это отлично работает:

// 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();

Но пока ничего из этого не сработало. Есть идеи о том, как я могу остановить это?

У меня были огромные проблемы с этим

Сначала я попробовал, .clear()потом попробовал, .destroy()и попытался установить ссылку на диаграмму на null

Что окончательно <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);
};

Несколько часов назад я столкнулся с той же проблемой.

Метод ".clear ()" фактически очищает холст, но (очевидно) оставляет объект живым и реактивным.

Внимательно читая официальную документацию , в разделе «Расширенное использование» я заметил метод «.destroy ()», описанный следующим образом:

«Используйте это для уничтожения любых созданных экземпляров диаграммы. Это очистит все ссылки, хранящиеся в объекте диаграммы в Chart.js, вместе со всеми связанными прослушивателями событий, прикрепленными Chart.js».

Он действительно делает то, что заявляет, и у меня он отлично сработал, я предлагаю вам попробовать.

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});
}

Это единственное, что у меня сработало:

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

У меня была такая же проблема ... Я пытался использовать методы destroy () и clear (), но безуспешно.

Я решил это следующим образом:

HTML:

<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);

У меня это работает идеально ... Я надеюсь, что это поможет.

Это очень хорошо сработало для меня

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

Используйте .destroy, чтобы уничтожить все созданные экземпляры диаграммы. Это очистит все ссылки, хранящиеся в объекте диаграммы в Chart.js, вместе со всеми связанными прослушивателями событий, прикрепленными Chart.js. Это необходимо вызвать перед повторным использованием холста для новой диаграммы.

Мы можем обновить данные диаграммы в Chart.js V2.0 следующим образом:

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

Используя CanvasJS, это работает для меня, очищая диаграмму, и все остальное, может работать и для вас, предоставляя вам полностью настраивать свой холст / диаграмму перед каждой обработкой в ​​другом месте:

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

Я не мог заставить работать .destroy (), так что я делаю это. Я хочу, чтобы холст отображался в div chart_parent. Мне нужно, чтобы размер холста менялся каждый раз, поэтому этот ответ является продолжением предыдущего.

HTML:

<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>');

Когда вы создаете один новый холст chart.js, это создает один новый скрытый iframe, вам нужно удалить холст и старые iframe.

$('#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

Это сработало для меня. Добавьте вызов clearChart в верхней части updateChart ()

`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;
}`

Если вы используете chart.js в проекте Angular с Typescript, вы можете попробовать следующее:

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>

Что мы сделали, так это перед инициализацией новой диаграммы удалили / уничтожили экземпляр диаграммы предварительного просмотра, если он уже существует, затем создали новую диаграмму, например

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

Надеюсь это поможет.

Дополняя ответ Адама

С Vanilla JS:

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

Простое редактирование для 2020 года:

Это сработало для меня. Измените диаграмму на глобальную, сделав ее владельцем окна (измените декларацию с var myChartна window myChart)

Проверьте, инициализирована ли уже переменная диаграммы как Chart, если да, уничтожьте ее и создайте новую, даже если вы можете создать другую с тем же именем. Ниже приведен код:

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

Надеюсь, что это работает!

Для меня это сработало:

		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";

В 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().

Поскольку уничтожение уничтожает «все», дешевое и простое решение, когда все, что вам действительно нужно, это просто «сбросить данные». Сброс ваших наборов данных на пустой массив также будет работать нормально. Итак, если у вас есть набор данных с метками и осью с каждой стороны:

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});

Это будет намного легче, чем полностью уничтожить всю вашу диаграмму / набор данных и восстановить все.

для тех, кто вроде меня использует функцию для создания нескольких графиков и хочет обновить их тоже блоком, у меня работала только функция .destroy (), я бы хотел создать .update (), который кажется более чистым, но ... . вот фрагмент кода, который может помочь.

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 ...

Сначала поместите диаграмму в какую-либо переменную, затем запишите ее в следующий раз перед запуском

# Проверяем, существует ли объект myChart, а затем искажаем его

    if($scope.myChart) {
      $scope.myChart.destroy();
    }

    $scope.myChart  = new Chart(targetCanvas