在Chart.js中制作一个带有在X轴上反映标签的图例的条形图

Question

在Charts.js中，我试图用单个数据集创建一个条形图，并且每一列的颜色都不同。 所需的结果如下所示：

但是，当我尝试创建这样的内容时，充其量我会得到以下内容

以下代码是用于初始化图表的图表配置对象：

var config_canvas_alerts = {
        type: 'bar',
        data: {
            datasets: [{
                data: [
                    value0,value1,value2,value3,
                ],
                backgroundColor: [
                    "#F7464A","#46BFBD","#FDB45C","#949FB1",
                ],
            }],
            labels: [
                "Move - Match " + value0,
                "Move - Unmatch " + value1,
                "Permit - Match " + value2,
                "Permit - UnMatch" + value3,
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'right',
                onClick: function (e, p) {
                    alert(p.text);
                },
            },
            title: {
                display: true,
                text: '@Model.mgt_dash_alert.graph_title',
                position: 'top',
                fontStyle: 'normal',
                fontSize: 14,
                padding: 10
            }
        }
    };

我试图重新构造数据，以使每个data值都成为具有附加值，背景色和标签的自己的数据集对象，但效果也不佳。

我能够实现此目标（以及因此生成第一张屏幕截图）的唯一方法是在初始化后将图形从饼图动态更改为条形图。传说似乎运作良好。

从饼图到条形图动态更改并不理想。这里有什么建议吗？