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

Ответ 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);
};

Ответ 2

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

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

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

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

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

Ответ 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});
}

Ответ 4

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

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

Ответ 5

У меня была такая же проблема здесь... Я попытался использовать метод 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);

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

Я не мог получить .destroy(), чтобы работать, так что это то, что я делаю. Диаграмма 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>');

Ответ 10

Когда вы создаете один новый файл chart.js, это создает один новый скрытый 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

Ответ 11

Если вы используете 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>

Ответ 12

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

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

Ответ 13

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

Ответ 14

Это сработало для меня. Добавьте вызов в 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;
}'

Ответ 15

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

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

или, в зависимости от того, используете ли вы 2d набор данных:

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

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

Ответ 16

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

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

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