在 Chart.js 中使用未知数量的数据集

Question

我对 javascript 还是很陌生，这让我把头撞在墙上。我确信这真的很简单，但由于某种原因，我似乎无法正常工作。我在 stackoverflow 上看到过类似的问题，但我无法让它们为我工作。

我正在尝试将未知数量的数据集绘制到 Chartjs 图上。我能够获取数据（使用 PHP，它作为画布子元素上的数据属性输出）并将它们存储到变量 $rows。

var $rows = $('#graphCanvas').find('> div')

然后我遍历行并计算数据集。

var colors = [ '#2685CB', '#4AD95A', '#FEC81B', '#FD8D14', '#CE00E6', '#4B4AD3', '#FC3026', '#B8CCE3', '#6ADC88', '#FEE45F'  ];

for (var i=0; i<$rows.length; i++) {
    datasetdata[i] = {
        label:"Test " + i,
        data: getdata($rows[i]),
        backgroundColor: colors[i],
        hoverBackgroundColor: colors[i],
        borderStyle: 'solid',
        borderWidth: 2,
    }
}

function getdata($rows) {
    //returns raw data
}

这一切都很好，但是当我尝试使用datasetdata时问题就开始了

var graphContext = document.getElementById("graphCanvas").getContext("2d");
var graphData = {
    labels: labels,
    datasets: [datasetdata]
};

如果我将它与索引一起使用，它可以正常工作：datasetdata[0]

如果我确定有多少数据集，我可以添加它们的索引就可以了。

任何洞察我做错了什么都会很棒

Answer 1

问题：

您在datasetdata变量周围有一组额外的括号。

解决方案：

删除括号并将 设置datasets为 just datasetdata：

var graphData = {
    labels: labels,
    datasets: datasetdata
};

解释：

该datasets选项接受作为数据集对象数组的参数。想要的结构如下所示：

datasets: [
    { dataset1 },
    { dataset2 }
]

在您的代码中，您datasetdata用一组括号将 括起来：

var graphData = {
    labels: labels,
    datasets: [datasetdata]
};

通过添加另一组括号，您基本上是设置datasets为包含该datasetdata数组的数组。该代码呈现的结果如下所示：

datasets: [
    [ { dataset1 }, { dataset2 } ]
]

如果在特定索引处添加 select 数组的值，则您正在从datasetdata数组中提取单个数据集。

var graphData = {
    labels: labels,
    datasets: [datasetdata[0]]
};

您的结构是一个数组，其中包含一个数据集：

datasets: [
   { dataset1 }
]

这段代码不会抛出错误，因为结构是有效的，但是，它只会显示第一个结果。