javascript - 如何在 ChartJs 中显示分组数据

Question

我有以下数组：

数组键是日期，我想要绘制的唯一元素是重量。看：

我将代码如下。请注意，我已经在日期属性中对属于每个该键的整个集合进行了分组。

var ctx = document.getElementById("barChart").getContext("2d");

var data = {
    labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
    datasets: [
        {
            label: '21/03/2018',
            data: [12, 0, 0]
        },
        {
            label: '01/04/2018',
            data: [15.00, 15.00,15.00]
        },
        {
            label: '02/04/2018',
            data: [25.00, 25.00, 25.00]
        },
        {
            label: '04/04/2018',
            data: [25.00, 25.00, 25.00]
        },
        {
            label: '05/04/2018',
            data: [-8.14,-7.93, -7.84]
        },
        {
            label: '06/04/2018',
            data: [-35.9 ,-38.1, -37.5]
        },
    ]
};

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
});

但是这样ChartJs不明白，它只需要绘制“data”属性中存在的数据集，并通过key进行分组。以错误的方式绘制图形。

知道数据已经分组，我怎么能正确地绘制数据？

Answer 1

您需要这样组织数据：

var ctx = document.getElementById("canvas").getContext("2d");

var data = {
    labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
    datasets: [
        {              
                data: [12, 15.00, 25.00, 25.00, -8.14, -35.9]
        },{          
                data: [0, 15.00, 25.00, 25.00, -7.93, -38.1]
        },{          
                data: [0, 15.00, 25.00, 25.00, -7.84, -37.5]
        }
    ]   
};

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options:{
        legend: 'none'
    }
});

我把你的传说删了，因为在这种情况下它没用。从编码的角度来看，日期所在的任何索引labels都需要与您要在该分组中显示的信息的索引相关联。data[0]指labels[0]代等。