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

为什么不使用.get()就不能使用.getcontext()？？

Answer 1

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

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

您必须使用 classes 而不是 id。

.get(0) returns 您使用 jQuery 搜索的元素的第一个实例。如果不先获取元素，就无法获取上下文。您需要做的是增加“0”以检索其他实例。

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

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

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

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

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

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

var data = [];

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

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

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

Chart.js: One function for multiple graphs