Question

我遇到了在一个页面上显示多个图表的一些问题。

在我的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，所以我觉得这一切都错了。

但似乎plot.destroy实际上并没有做任何事情。

如果有人有任何见解，我会非常感激。

Answer 1

以下行是多余的。

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

相反，$this变量已经是指向元素的指针。

意义 - 你可以这样做：

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

我的猜测是php没有创建两个不同的ID，并且javascript会让人感到困惑。

在一个页面上显示多个折线图

1 个答案: