javascript - 在 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值都成为其自己的数据集对象，并带有相应的值、背景颜色和标签，但这也没有奏效。

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

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

标签： javascriptchart.js