Mehrere Liniendiagramme auf einer Seite anzeigen

Question

Es treten Probleme auf, wenn mehrere Graphen auf einer Seite angezeigt werden.

In meinem html/php Vorlage Ich habe folgende

<?php 
    foreach($charts as $chart) { 
     echo '<canvas class="chart" id="'.$chart['id']" width="700" height="200"></canvas>'; 
    } 
?> 

Meine Javascript-Datei ist wie folgt:

$().ready(function() 
{ 
    $('.chart').each(function() { 
     var $this = $(this); 
     create_plot($this); 
    }); 
}); 

function create_plot($this, mode) 
{ 
    if(!$this) return; 

    var plot = $this.data('my_plot'); 
    if(plot) { 
     plot.destroy(); 
     $this.removeData('my_plot'); 
    } 

    var data = {data-in-here}; 

    var ctx = document.getElementById($this.attr('id')); 

    var plot = new Chart(ctx, { 
     type: 'line', 
     data: data, 
    }); 

    $this.data('my_plot', plot); 
} 

Das Problem ist, dass, wenn es zwei Diagramme in der Schleife, die gleiche Daten werden in beiden Diagrammen angezeigt.

Ich bin sehr sehr neu zu JS, also ich habe das alles falsch.

Aber es scheint, dass die plot.destroy nichts tut.

Wenn jemand irgendeinen Einblick hat, würde ich es sehr schätzen.

Answer 1

Die folgende Zeile ist redundant.

var ctx = document.getElementById($this.attr('id')); 

Stattdessen wird die $this Variable ist bereits ein Zeiger auf das Element.

Bedeutung - können Sie tun:

var plot = new Chart($this, { 
    type: 'line', 
    data: data, 
}); 

Meine Vermutung ist, dass PHP nicht zwei verschiedene IDs schafft, und JavaScript ist verwirrt gelassen.