Question

任何人都可以帮助我理解为什么该提琴中的第一个图表显示不正确吗？它应该有两个分组的水平堆栈，但是未显示分配给数据集的辅助X轴（x-axis-1）的两个数据集。

var myChart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
            "datasets":[{
                    "label":"One",
                    "data":[100],
                    "stack":"Stack 0",
                    "backgroundColor":"green"
                    },{
                    "label":"Two",
                    "data":[200],
                    "stack":"Stack 0",
                    "backgroundColor":"orange"
                    },{
                    "label":"Three",
                    "data":[150],
                                            "stack":"Stack 1",
                    "xAxisID":"x-axis-1",
                    "backgroundColor":"lightgrey"
                    },{
                    "label":"Four",
                    "data":[300],
                    "stack":"Stack 1",
                    "xAxisID":"x-axis-1",
                    "backgroundColor":"darkgrey"}]},
    options: {

            scales: {
                    xAxes: [{
                            stacked: true,
                            id: "x-axis-0",
                            },{
                            stacked: true,
                            id: "x-axis-1",
                            }],
                    yAxes: [{
                            stacked: true,
                            id: "y-axis-0",
                            }],
                    }
            }
    });

第二个图表具有相同的配置，但只需进行最小的更改即可使其成为普通的（垂直）条形图，并且完全可以按预期工作。

这是库中的错误，还是我所缺少的？

Answer 1

欢迎使用StackOverflow！根据文档，水平条形图的数据结构看起来略有不同。您希望数据看起来像这样：

data: {
        "labels": ["One", "Two", "Three", "Four"],
        "datasets":[{
                "label": "First Dataset",
                "data":[100,200,150,300],
                "backgroundColor":["green","orange","lightgrey","darkgrey"]
        }]
},

我在这里附上了一个小提琴：https://jsfiddle.net/c2jtL7gz/6/

chart.js horzontalBar堆叠并分组-数据未显示-错误？

1 个答案: