Chart.js柱状图多数据项不显示柱状条问题求助

问题原因 #

你的代码存在两个核心问题：

1. 数据格式错误：results.AppsName是逗号分隔的字符串（比如"MoreTesting,Search,Test_email"），你直接把它放进数组[results.AppsName]，相当于给Chart.js传了一个单元素字符串数组，而Chart.js需要的是对应每个标签的数值数组。
2. 标签与数据不匹配：labels: [results.Apps]把整个results.Apps当成单个标签，没有拆分成对应每个App的标签数组，导致标签数量和数据数量不匹配，无法渲染柱状条。

修复方案 #

需要把后端返回的逗号分隔字符串拆分成数组，同时将数据转换为数值类型，确保标签和数据一一对应：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
 
success: function (results) {
    if (results !== null) {
        // 拆分App名称字符串为标签数组
        const appLabels = results.AppsName.split(',');
        // 拆分计数字符串并转为数值数组（确保后端返回的results.Apps是逗号分隔的数字字符串）
        const appCounts = results.Apps.split(',').map(item => parseInt(item, 10));
        
        var barChartData = {
            labels: appLabels, 
            datasets: [{
                label: 'Apps Count',
                backgroundColor: [
                    "#f990a7",
                    "#aad2ed",
                    "#9966FF",
                    "#99e5e5",
                    "#f7bd83"
                ],
                borderWidth: 2,
                data: appCounts // 使用转换后的数值数组
            }]
        };

        var ctx1 = document.getElementById("barcanvas").getContext("2d");
        window.myBar = new Chart(ctx1, {
            type: 'bar',
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: "Apps Count"
                },
                responsive: true,
                maintainAspectRatio: true
            }
        });
    }
}

额外注意事项 #

• 确认后端返回的results.Apps是与results.AppsName长度一致的逗号分隔数值字符串（比如"2,3,1"对应"MoreTesting,Search,Test_email"）。
• 如果后端已经返回数组格式（而非字符串），直接使用即可，无需split操作。
• 若App数量超过backgroundColor的颜色数量，可以动态生成颜色，或者通过取模循环使用现有颜色。

内容的提问来源于stack exchange，提问作者edward678