Javascript 在chart.js中制作一个条形图，其中包含一个图例，该图例反映X轴上的标签

在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
            }
        }
    };

我试图重新构造数据，使每个

数据

值成为其自己的数据集对象，并附带值、背景颜色和标签，但这也没有奏效

我实现这一点的唯一方法（以及我如何生成第一个屏幕截图）是在初始化后动态地将图形从饼图更改为条形图。这个传说似乎很成功

---

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

value0来自数组，或者value0本身是一个变量？为什么要这样做？它只是重复图表中已有的信息（作为x轴标签）。所有这些只会增加噪音，使图表更难理解。我建议不要显示图例。@timclutton这些列是可以单击的，但对于某些用户来说，尝试单击小列可能有点困难。图例可以解决这个问题，因为标签也是可点击的