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搜索的元素的第一个实例.如果没有先获取元素,就无法获得上下文.你需要做的是增加'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]);
});

我在一个页面中使用此方法用于三个折线图,每个图表都有不同的数据,如下所示: