在Chart.js中使用未知数量的数据集 [英] Using unknown number of datasets in Chart.js

问题描述

我对javascript还是很陌生，这使我无法自拔。我敢肯定这确实很简单，但是由于某种原因，我似乎无法正常工作。我曾在stackoverflow上看到过类似的问题，但我无法让它们为我工作。

I'm still fairly new to javascript and this has got me banging my head against the wall. I'm sure it's really simple but for some reason I cannot seem to get this working correctly. I have seen similar questions on stackoverflow but I can't make them work for me.

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

I am trying to plot an unknown number of datasets onto a Chartjs graph. I am able to get the data (using PHP it is output as data attributes on child elements of the canvas) and store them to a variable $rows.

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

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

I then iterate through the rows and calculate the dataset.

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

This all works well however the problem starts when I try to use datasetdata

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

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

If I use it with an index it works fine: datasetdata[0]

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

If I knew for sure how many datasets there would be I could just add their indexes and it would be fine.

任何对我正在做错事的了解都是很好的

Any insight into what I'm doing wrong would be great

推荐答案

问题：

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

Problem:

You have an extra set of brackets surrounding the datasetdata variable.

删除括号并将数据集设置为 datasetdata ：

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

解释：

datasets 选项接受一个参数，该参数是数据集对象的数组。所需的结构如下：

Explanation:

The datasets option accepts a parameter that is an array of dataset objects. The wanted structure looks as following:

datasets: [
    { dataset1 },
    { dataset2 }
]

在代码中，您包围了 datasetdata 通过一组括号：

In your code, you surrounded the datasetdata by a set of brackets:

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

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

By adding another set of brackets, you are basically setting datasets to an array which contains the datasetdata array. The code renders a result that looks as following:

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

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

If you add select the value of the array at a specific index, you are extracting a single dataset from the datasetdata array.

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

那么您的结构就是其中具有单个数据集的数组：

Your structure is then an array with a single dataset inside it:

datasets: [
   { dataset1 }
]

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

This code won't throw and error, since the structure is valid, however, it will only display the first result.

这篇关于在Chart.js中使用未知数量的数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！