使用JQuery动态更新ChartJS折线图失败求助

问题原因 #

你在AJAX回调中直接重新赋值了全局数组（rdone_array = JSON.parse(...)），但Chart实例初始化时，data.datasets里的data属性已经绑定了初始空数组的引用。重新赋值全局数组会让它指向新的内存地址，Chart内部的数据并没有被同步更新，所以调用myChart.update()不会生效。

另外你的配置里scales直接放在了config根节点，这是错误的——ChartJS的scales配置必须嵌套在options中，否则y轴的自定义配置不会生效。

修复方案 #

直接在AJAX成功回调中修改Chart实例的data对象，更新对应数据集的数值，再调用update()。无需依赖全局数组的引用，这种方式更直接可靠。

修改后的代码 #

var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]

// 获取图表数据的后端请求
function get_graphData(year, timePeriod, direction){
    $.ajax({
        method:"get",
        url:"/los_graph",
        data:{
            db_year: year,
            db_timePeriod: timePeriod,
            db_direction_value: direction,
        },
        success:function(res){
            // 解析服务器返回的数据
            const rdoneData = JSON.parse("[" + res['rdone'] + "]");
            const rdtwoData = JSON.parse("[" + res['rdtwo'] + "]");
            const rdthreeData = JSON.parse("[" + res['rdthree'] + "]");
            
            // 直接更新Chart实例的数据集
            myChart.data.datasets[0].data = rdtwoData;
            myChart.data.datasets[1].data = rdoneData;
            myChart.data.datasets[2].data = rdthreeData;
            
            // 触发图表更新
            myChart.update();
        }
    });
}

// 前端图表初始化代码
var data = {
    labels: months,
    datasets: [
        {
            label: 'Road 1',
            borderColor: '#d62828',
            data: [], // 初始空数据
            borderWidth: 2,
        },
        {
            label: 'Road 2',
            borderColor: '#f77f00',
            data: [],
            borderWidth: 2,
        },
        {
            label: 'Road 3',
            borderColor: '#fcbf49',
            data: [],
            borderWidth: 2,
        }
    ]
};

var config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        scales: { // 修正scales的位置，嵌套在options内
            y: {
                title: {
                    display: true,
                    text: 'Value'
                },
                ticks: {
                    min: 0,
                    max: 150,
                    color: "white",
                    stepSize: 10
                }
            }
        }
    }
};

var myChart = new Chart(
    document.getElementById('myChart'),
    config
);

额外注意点 #

• 检查服务器返回的res['rdone']等字段格式：如果返回的本身就是标准数组字符串（比如"[10,20,30]"），那么JSON.parse("[" + res['rdone'] + "]")会生成嵌套数组，此时应该直接用JSON.parse(res['rdone'])解析。
• 移除了不必要的全局数组，减少变量污染，代码逻辑更清晰。

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