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

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

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

читать внимательно официальная документация, в разделе "расширенное использование", я заметил метод".уничтожить()", описывается следующим образом:

" используйте это, чтобы уничтожить все созданные экземпляры диаграммы. Эта воля очистите все ссылки, сохраненные на диаграмме объект внутри диаграммы.js, вместе с любыми связанными прослушивателями событий, прикрепленными диаграммой.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();

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

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

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

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

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

при создании новой диаграммы.JS canvas, это создает один новый скрытый iframe, вам нужно удалить холст и старые iframes.

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

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

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

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

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

диаграмма.js имеет ошибку: Chart.controller(instance) регистрирует любую новую диаграмму в глобальном свойстве Chart.instances[] и удаляет его из этого свойства .destroy().

но при создании диаграммы диаграммы.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().

если вы используете свой старый объект dataset без удаления ._meta property, диаграммы.js добавит новый набор данных в ._meta без удаления предыдущих данных. Таким образом, на каждом графике повторная инициализация объект dataset накапливает все предыдущие данные.

чтобы избежать этого, уничтожьте объект dataset после вызова Chart.destroy().