Pytanie Jak wyczyścić wykres z obszaru roboczego, aby zdarzenia najeżdżania nie mogły zostać wyzwolone?


Używam wykresu Chartjs do wyświetlania wykresu liniowego i działa to dobrze:

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

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

Ale problem występuje, gdy próbuję zmienić dane dla wykresu. Aktualizuję wykres, tworząc nowe wystąpienie wykresu z nowymi punktami danych, a tym samym reinicjując płótno.

To działa dobrze. Jednak po najechaniu kursorem na nowy wykres, jeśli zdarzy mi się przejść przez określone lokalizacje odpowiadające punktom wyświetlanym na starym wykresie, wskaźnik zawijania / etykieta jest nadal wyzwalany i nagle stary wykres jest widoczny. Pozostaje widoczny, gdy moja mysz znajduje się w tym miejscu i znika, kiedy ruszam z tego punktu. Nie chcę wyświetlać starego wykresu. Chcę go całkowicie usunąć.

Próbowałem wyczyścić zarówno obszar roboczy, jak i istniejący wykres przed załadowaniem nowego. Lubić:

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

i

chart.clear();

Ale żadna z nich nie zadziałała tak daleko. Jakieś pomysły na temat tego, jak mogę to powstrzymać?


76
2017-07-18 01:02


pochodzenie


Stary, to jest właśnie problem, który mam. Metoda "destroy ()" nie działa i wkurza mnie. - neaumusic
Czy mogę zapytać, w jaki sposób uzyskujesz dostęp do obiektu wykresu? Mam ten sam problem, tworzę wykres, a następnie operuję kliknięciem przycisku Potrzebuję go zniszczyć, ale jest on w zupełnie innej funkcji i nie mogę znaleźć sposobu dostępu do obiektu wykresu przez płótno lub kontekst obiekty. - Matt Williams
Wystąpił błąd związany z tym problemem, zobacz go tutaj. github.com/jtblin/angular-chart.js/issues/187 - MDT


Odpowiedzi:


Miałem z tym ogromne problemy

Najpierw próbowałem .clear() wtedy próbowałem .destroy() i próbowałem ustawić moje odniesienie do wykresu na wartość null

Co w końcu naprawiło problem: usunięcie pliku <canvas> element, a następnie ponownie nowe <canvas> do kontenera nadrzędnego


Mój konkretny kod (oczywiście jest milion sposobów, aby to zrobić):

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

90
2017-07-31 16:15



Działa to po prostu świetnie - Leandro Temperoni
Działa świetnie, sir !!! - Bhavesh Gangani
Pracował jak mistrz. Jeśli ktokolwiek wie, czy wersja 2 programu Chart.js to naprawia, opublikuj ją tutaj. Zastanawiam się, czy zniszczenie jest zrujnowane, czy też używamy go niepoprawnie. - KickingLettuce
niszczono działa! stackoverflow.com/a/24854333/212661 - sandeep talabathula
Miły! Dzięki! Właśnie dodałem $ ('# results-graph'). Remove (); $ ('# graph-container'). append ('<canvas id = "result-graph"> <canvas>'); przed utworzeniem wykresu. - Ignacio


Kilka godzin temu stanąłem przed tym samym problemem.

Metoda "clecle () "faktycznie usuwa płótno, ale (ewidentnie) pozostawia obiekt żywym i reaktywnym.

Czytanie uważnie oficjalna dokumentacja, w sekcji "Zaawansowane użycie" zauważyłem metodę ".destroy ()", opisaną w następujący sposób:

"Użyj tego, aby zniszczyć wszystkie utworzone instancje wykresu   wyczyścić wszelkie odwołania przechowywane w obiekcie wykresu w Chart.js,   wraz z dowolnymi powiązanymi detektorami zdarzeń dołączonymi przez Chart.js. "

W rzeczywistości robi to, co twierdzi i działało dobrze dla mnie, sugeruję, aby spróbować.


29
2017-07-20 19:56



Czy możesz pokazać przykład? Próbowałem wielokrotnie blokować i nigdy nie działa. Zawsze pojawia się błąd, że metoda nie istnieje. - Ben Hoffman
(<ChartInstance> this.chart) .destroy (); - David Dal Busco
To jest właściwy anszwer. W celu uzyskania dalszych referencji zobacz: stackoverflow.com/questions/40056555/... - ThePhi


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

19
2018-05-26 20:58



to najlepsza alternatywa - RafaSashi
Dobry. Dzięki - Manjunath Siddappa


To jest jedyna rzecz, która zadziałała dla mnie:

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

9
2017-08-14 18:50





Miałem ten sam problem tutaj ... Próbowałem użyć metody destroy () i clear (), ale bez powodzenia.

Rozwiązałem to w następujący sposób:

HTML:

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

JavaScript:

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

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

Działa idealnie dla mnie ... mam nadzieję, że to pomaga.


4
2017-08-12 07:29





To zadziałało bardzo dobrze dla mnie

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

Posługiwać się .zniszczyć aby zniszczyć wszystkie utworzone wystąpienia wykresów. Spowoduje to wyczyszczenie wszystkich referencji przechowywanych w obiekcie wykresu w Chart.js, wraz z wszelkimi powiązanymi detektorami zdarzeń dołączonymi przez Chart.js. To musi zostać wywołane, zanim płótno zostanie ponownie wykorzystane do nowego wykresu.


4
2017-08-04 06:56



W ten sposób działa poprawnie dla mnie, wygląda na to, że niszczy on wywołania zwrotne w dymku. Zbiorniki tak dużo !! - Antoine Pointeau


Używając CanvasJS, działa to dla mnie, czyszczenie wykresu i wszystkiego innego, może pracować również dla ciebie, dając ci możliwość ustawienia twojego płótna / wykresu w pełni przed każdym przetwarzaniem w innym miejscu:

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

1
2017-08-20 03:45



dla mnie nie działały powyższe metody. To działało idealnie. Wielkie dzięki. - beginner


Nie mogłem dostać .destroy () do pracy, więc to jest to, co robię. Element div dla wykresu to miejsce, w którym chcę pokazać płótno. Potrzebuję płótna do zmiany rozmiaru za każdym razem, więc ta odpowiedź jest rozszerzeniem powyższego.

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

1
2017-11-18 07:36





Gdy utworzysz jedno nowe płótno chart.js, spowoduje to ukrycie jednego nowego elementu iframe, musisz usunąć płótno i stare elementy 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 });

odniesienie: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html


1
2018-06-10 20:43





Możemy zaktualizować dane wykresu w Chart.js V2.0 w następujący sposób:

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

1
2018-04-24 12:56