Chart.js：多个图形的一个函数

Question

我正在使用charts.js

我有从数据库中提取的多个元素。我的目标是为每个元素附加一个图表。但是，有时页面上有30个元素，因此为每个元素编写脚本会非常痛苦。所以我想为每个#line ...

创建一个图表

这样可行，但仅适用于第一个图表（因为我使用的是.get(0)：

$('#line').each(function(){
    var ctx = $(this).get(0).getContext("2d");
    new Chart(ctx).PolarArea(data);
});

但这不起作用：

$('#line').each(function(){
    var ctx = $(this).getContext("2d");
    new Chart(ctx).PolarArea(data);
});

为什么我不能在不使用.getcontext() ??

的情况下使用.get()

Answer 1

您的html页面中不能有多个相同的ID。因此，您不能像在此处尝试那样循环使用相同ID的数组：

$('#line').each(function(){
    var ctx = $(this).get(0).getContext("2d");
    new Chart(ctx).PolarArea(data);
});

你必须使用类而不是id。

.get（0）返回您使用jQuery搜索的元素的第一个实例。在没有首先获得元素的情况下，您无法获得上下文。你需要做的是增加＆＃39; 0＆＃39; 0为了检索其他实例。

这可以通过将索引和元素传递给函数来完成，如：

$('.line').each(function(index, element)

所以你的代码实际上应该是这样的：

$('.line').each(function(index, element){          
  var ctx = element.getContext("2d");
  new Chart(ctx).PolarArea(data);
});

并且您需要更新html中的canvas元素以使用class =＆＃34; line＆＃34;而不是id =＆＃34; line＆＃34;。

此外，如果您希望在每个图表上显示不同的数据，我建议创建一个数组来保存数据对象，如：

var data = [];

然后向它添加数据对象，以便它们也可以通过索引号访问，如下所示：

$('.line').each(function(index, element){          
  var ctx = element.getContext("2d");
  new Chart(ctx).PolarArea(data[index]);
});

我将这种方法用于一个页面中的三个折线图，每个折线图都有不同的数据，如下所示：