Уничтожьте гистограмму chart.js, чтобы перерисовать другой граф в том же <canvas>

Ответ 1

Правильный способ использования, чтобы иметь возможность рисовать другую диаграмму на одном холсте, .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 });

Прямо из docs (в разделе Prototype Methods):

.destroy()

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

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

В нем явно указано, что этот метод нужно вызвать до того, как canvas может быть повторно использован для новой диаграммы.

.clear() также упоминается позже в том же разделе, что и функция, которая "очистит холст диаграммы". Широко используется внутри фреймов анимации, но вы можете найти ее полезной ". Диаграмма будет жива и хорошо после вызова этого метода, поэтому это не метод вызова, если вы хотите повторно использовать холст для новой диаграммы.

Честно говоря, в случаях, подобных вашим, я часто использовал контейнер div для переноса моего canvas и, когда мне нужно было создать новый график, я поместил новый элемент canvas в этот div. Затем я использовал этот вновь созданный canvas для нового графика. Если вы когда-либо сталкиваетесь с странным поведением, возможно, связанным с графиками, занимающими холст перед текущей диаграммой, тоже имеете в виду этот подход.

Ответ 2

Удалите холст после каждого вызова диаграммы, это сработало для меня

$("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, { .... });

Ответ 3

Для ChartJS v2.x вы можете использовать update() для обновления данных диаграммы без явного уничтожения и создания холста.

var chart_ctx = document.getElementById("chart").getContext("2d");

var chart = new Chart(chart_ctx, {
    type: "pie",
    data: {}
    options: {}
});

$.ajax({
    ...
}).done(function (response) {
    chart.data = response;
    chart.update();
});

Ответ 4

Я использую Chart.js 2.7.2 на данный момент. В моем приложении я создаю несколько диаграмм и нуждаюсь в доступе к ним, чтобы правильно "заменить" их данные и исправить "старый график", показывая при наведении. Ни один из ответов, которые я пробовал, работал правильно.

Здесь можно управлять одним или несколькими диаграммами:

Хранить диаграммы в глобальном

var charts=[]; // global

Функция создания диаграмм

function createChart(id, type, labels, data)
{
    // for multiple datasets
    var datasets=[];
    data.forEach(function(set) {
        datasets.push({
            label: set.label,
            data: set.data
        });
    });  

    var config = {
        type: type,
        data: {
            labels: labels,
            datasets: datasets
        }
    };

    if(typeof charts[id] == "undefined") // see if passed id exists
    {   
        // doesn't, so create it
        charts[id]= new (function(){
            this.ctx=$(id); // canvas el
            this.chart=new Chart(this.ctx, config);
        })();     
        console.log('created chart '+charts[id].chart.canvas.id);     
    }
    else
    {
        charts[id].chart.destroy(); // "destroy" the "old chart"
        charts[id].chart=new Chart(charts[id].ctx, config); // create the chart with same id and el
        console.log('replaced chart '+charts[id].chart.canvas.id);        
    }
    // just to see all instances
    Chart.helpers.each(Chart.instances, function(instance){
        console.log('found instance '+instance.chart.canvas.id)
    })

}

Для каждого из ваших элементов холста, например:

<canvas id="thiscanvasid"></canvas>

Используйте эту функцию для создания/замены диаграммы

createChart('#thiscanvasid', 'bar', json.labels, json.datasets);

Ответ 5

Может быть, был лучший способ, но ответы мне не подходили.

document.querySelector("#chartReport").innerHTML = '<canvas id="myChart"></canvas>';

моя HTML часть

<div class="col-md-6 col-md-offset-3">
     <div id="chartReport">
         <canvas id="myChart"></canvas>
     </div>
</div>

Ответ 6

Чтобы решить эту проблему, я использовал методы jQuery add() и remove(), чтобы очистить холст. Я удаляю компонент и перед его рисованием снова append() холст снова с тем же идентификатором, используя метод jQuery append().

redraw(){

 $("#myChart").remove();// removing previous canvas element
 //change the data values or add new values for new graph
 $("#chart_box").after("<canvas id='myChart'></canvas>");
 // again adding a new canvas element with same id
 generateGraph();// calling the main graph generating function 

}

Ответ 7

Вы можете проверить это

 $('#canvas').replaceWith($('<canvas id="canvas" height="320px"></canvas>'));

;)

Ответ 8

Я всегда использую только 1 график/страницу. Destroy() решил проблемы.

 if (
        window.myLine !== undefined
        &&
        window.myLine !== null
    ) {
        window.myLine.destroy();
    }

    window.myLine = new Chart(graphCanvasCtx, config);