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”属性中存在的数据集并按键对它们进行分组。以错误的方式绘制图表。

如果知道数据已经分组，我怎样才能正确绘制数据？

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]，依此类推。

如何在ChartJs中显示分组数据

1 个答案: