Chart.js图表标签显示异常，无法正确渲染DataTable数据为柱状图

一、图表异常的核心原因及修复 #

你当前代码中获取数据的方式错误——因为你在DataTable的columns配置里使用了对象键名（data: 'project_name'、data: 'total'），说明服务器返回的每行数据是对象格式，而非数组。但你在循环中用_aData[0]、_aData[1]这种数组索引去取值，自然拿不到正确的project_name和total，导致图表标签和数据异常。

修复后的关键代码 #

"drawCallback" : function(settings)
{
    var hours_date = [];
    var hour = [];

    for(var count = 0; count < settings.aoData.length; count++)
    {
        // 改用对象键名获取数据，而非数组索引
        hours_date.push(settings.aoData[count]._aData.project_name);
        hour.push(parseFloat(settings.aoData[count]._aData.total));
    }

    var chart_data = {
        labels:hours_date,
        datasets:[
            {
                label : 'Hours',
                backgroundColor : 'rgb(255, 205, 86)',
                borderColor : '#fff', // 修正Chart.js属性：color不是数据集的合法属性，改用borderColor
                data:hour
            }
        ]   
    };

    var group_chart3 = $('#bar_chart');

    if(hour_chart)
    {
        hour_chart.destroy();
    }

    hour_chart = new Chart(group_chart3, {
        type:'bar',
        data:chart_data
    });
}

二、DataTable settings对象中aoData与_aData的作用 #

• settings.aoData：是DataTable存储当前页所有行数据的数组，数组中的每个元素对应表格的一行，包含该行的DOM元素、数据、配置等完整信息。
• _aData：是aoData数组中每个行对象的属性，存储的是该行的原始数据源（即服务器返回的该行数据，格式取决于你的配置和服务器返回内容：如果服务器返回对象，_aData就是对象；如果返回数组，_aData就是数组）。

补充说明 #

1. 确保服务器返回的JSON数据格式正确，每行数据包含project_name和total字段；
2. 若要设置Chart.js的标签文字颜色，需在options中配置（而非数据集的color属性）：

hour_chart = new Chart(group_chart3, {
    type:'bar',
    data:chart_data,
    options: {
        scales: {
            y: { ticks: { color: '#fff' } },
            x: { ticks: { color: '#fff' } }
        }
    }
});

内容的提问来源于stack exchange，提问作者Bilge Kaan Özkan