如何更正我的数据集，以便chart.js条形图将堆叠

Question

我正在尝试创建一个带有charts.js和ajax调用数据的堆积条形图，但它只会创建一个常规条形图。

我怀疑我的阵列格式不正确。

这是data的价值：https://i.imgur.com/Wi5Otfu.png

function doCharts(stat) {
 $.ajax({
    url: "data.php",
    method: "GET",
    data: {
        id: stat
    },
    success: function(data) {
        console.log(data);
        var stat_name = [];
        var stat_count = [];

        for(var i in data) {                
            stat_name.push(data[i].stat_name);
            stat_count.push(data[i].stat_count);
            }


        var chartdata = {
            labels: stat_name,
            datasets : [
                {
                    data: stat_count                
                }
            ]
        };              

        var ctx = document.getElementById("chart");

        var inScreening = new Chart(ctx, {

            type: 'bar',
            data: chartdata,
             options: {
    scales: {
      xAxes: [{ 
        stacked: true, 
        gridLines: { display: false },
        }],
      yAxes: [{ 
        stacked: true,  
        }],
    },
    legend: {display: false}
}

            });
    },
    error: function(data) {
        console.log(data);
    }
});

};

这是它产生的：https://i.imgur.com/E6izY4q.png

我想把所有那些单独的酒吧堆成一个。

Answer 1

如评论中所述，标签将是您的data元素stat_name属性的数组，并且将为您的data的每个条目设置数据集。您可以将data的大部分处理清理成以下内容：

const chartdata = {
    labels: data.map(item => item.stat_name),
    datasets: data.map(item => ({ data: item.stat_count }));
};