如何在Chart JS中使用x和y堆叠数据栏

Question

我试图用具有x和y值的数据（例如{x: 1, y:1}）绘制堆栈栏。 但是，似乎Chart JS跟随data中而不是labels中的索引对在x中传递的数组进行索引。 我也尝试使用ticks: {source: 'data'}，但没有用。

我必须取消对labels:的注释，并在非洲数据集中添加索引1和2才能看到所需的结果。

有什么办法吗？

<canvas id="barchart" width="800" height="450"></canvas>
<script>
var ctx = document.getElementById("barchart").getContext('2d');
var barchart = new Chart(ctx, {
    type: 'bar',
    data: {
    //labels: [0,1,2,3],
        datasets: [{ 
            data: [{x: 0, y: 2}, {x: 3, y: 1}],
            label: "Africa",
            backgroundColor: "#3e95cd",
            fill: false
          }, { 
            data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 2}],
            label: "Asia",
            backgroundColor: "#8e5ea2",
            fill: false
          }, { 
            data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 1}],
            label: "Europe",
            backgroundColor: "#3cba9f",
            fill: false
          }, { 
            data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 1}],
            label: "Latin America",
            backgroundColor: "#e8c3b9",
            fill: false
          }, { 
            data: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 3, y: 1}],
            label: "North America",
            backgroundColor: "#c45850",
            fill: false
          }
        ]
    },
    options: {
        legend: { display: false },
        title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
        },
        responsive: false, 
        maintainAspectRatio: false,
        scales: {
            xAxes: [{
                stacked: true,
                ticks: {source: 'data'}
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});
</script>