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设置为datasetdata：

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

说明：

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

datasets: [
    { dataset1 },
    { dataset2 }
]

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

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

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

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

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

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

您的结构就是一个内部有一个数据集的数组：

datasets: [
   { dataset1 }
]

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

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

1 个答案:

问题：

解决方案：

说明：