1つのページに複数の折れ線グラフを表示

Question

複数のグラフを1ページに表示する問題が発生しています。私のhtml/phpのテンプレートで

私は、次のしている

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

次のように

私のJavascriptファイルは次のとおりです。

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

問題は、2つのチャートがループ内に存在する場合、同じです両方のグラフにデータが表示されます。

私は非常に非常に新しいJSので、私はprobこれはすべて間違っている。

しかし、plot.destroyは実際に何もしていないようです。

誰もが洞察力を持っているなら、私は非常に感謝します。

Answer 1

次の行は冗長です。

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

代わりに、$this変数はすでに要素へのポインタです。

意味 - あなたが行うことができます：

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

私の推測では、PHPは二つの異なるIDを作成されていない、およびJavaScriptが混乱して残っているということです。