Chartjs堆叠条形图未正确显示

Question

我试图创建一个堆叠条形图与chartjs。我有时间差异的时间序列，这意味着一些序列可以在一段时间内有价值，但其他序列没有价值。出于这个原因，我选择直接将x值包含在数据集中，而不是作为标签数组，但是图表不能正确渲染。

这是我的代码：

var config = {
        type:'bar',
        data:{
            datasets:datasets
        },
        options: {
            responsive: true,
            title:{
                display:true,
                text:"MyChart"
            },
            tooltips: {
                mode: 'index'
            },
            hover: {
                mode: 'index'
            },
            legend: {
                    position: 'bottom'
            },
            elements: { point: { radius: 0 }},
            scales: {
                xAxes: [{
                    stacked: true,
                    type: 'time',
                    time: {
                        unit: 'minutes',
                        unitStepSize: 5,
                        displayFormats:{
                            minutes:'HH:mm'
                        }

                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Date'
                    }
                }],
                yAxes: [{
                    stacked:true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Resources Consumed'
                    }
                }]
            }
        }
    };

    var ctx = document.getElementById('session-sql-activity').getContext("2d");
    ctx.canvas.height = 300;
    ctx.canvas.width = 800;
    new Chart(ctx,config);

我认为问题在于x轴堆叠。

这里有一个JSFiddle来说明这个问题。

https://jsfiddle.net/1kLyyjfp/

Answer 1

我认为一个解决方案是为y轴指定一个值。

{
    "y": 0,
    "x": "2017-12-22 08:59"
}

结果数据集是：

[{
    "data": [{
        "y": 2,
            "x": "2017-12-22 08:59"
    }, {
        "y": 18,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#32AA09",
    "label": "7726bj0dhtnmt"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 2,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#CF5A26",
    "label": "0ks4u5nywjbdj"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 4,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#DA43AA",
    "label": "1mnbsygj75jvx"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 2,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#5200A0",
    "label": "39ymdt11ybwhz"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 2,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#925E44",
    "label": "4v1whmzv76j2z"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 2,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#477BD4",
    "label": "5sfyujuhwbj9n"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 4,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#272755",
    "label": "6x0zvf2mw8t6g"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 2,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#F581E0",
    "label": "7kpk62m5n8j9q"
    }, {
    "data": [{
        "y": 0,
            "x": "2017-12-22 08:59"
    }, {
        "y": 20,
            "x": "2017-12-22 09:00"
    }],
    "backgroundColor": "#4128A8",
    "label": "7mwz4m103nn1k"
}];