代码之家 › 专栏 › 技术社区 › Nikko

如何在图表js中用x和y从数据中堆叠条形图

chart.js javascript

Nikko · 技术社区 · 6 年前

我试图用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>