如何将jQuery计算器计算结果动态传入Chart.js并更新图表？

问题概述 #

我有一个基于jQuery开发的计算器，希望将计算得到的数值传递给Chart.js程序，使图表能够随着新的计算结果动态调整。已尝试通过全局变量window.total传递数值，但未达到预期效果。

解决方案 #

1. 确保Chart实例全局可访问 #

保证chart变量处于全局作用域，让jQuery代码能直接调用其更新方法。若Chart.js代码在jQuery之后加载，保留var chart的全局声明即可。

2. 计算完成后直接更新Chart数据 #

在jQuery的点击事件处理函数末尾，添加代码更新Chart的数据集与中间显示文本，再调用chart.update()触发重绘。

修改后的jQuery关键代码：

$('form#roi').on('click', '.calculate-roi', function() {
    // 原有计算逻辑...
    
    // 原有输出结果代码...

    // --- 新增：更新Chart.js数据 ---
    // 用三个分类的总和作为图表数据，可按需调整对应数值
    chart.data.datasets[0].data = [mr_results_total, ea_results_total, rav_results_total];
    // 存储需要在图表中间显示的文本（示例为总数值，可改为百分比或其他）
    chart.customText = formatPrice(mr_results_total + ea_results_total + rav_results_total);
    // 触发图表重绘
    chart.update();
});

3. 修改Chart插件获取最新文本 #

调整Chart的beforeDraw插件，从Chart实例的自定义属性中读取动态文本：

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    // 从chart实例的自定义属性取文本，默认值保留原"75%"
    var text = chart.customText || "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

4. 修正jQuery选择器错误 #

原代码中类选择器格式错误，$("#.manage_risk_1")需改为$(".manage_risk_1")（去掉多余的#），所有类选择器都要修正，否则页面无法正常显示计算结果。

核心逻辑说明 #

• 摒弃全局变量传递方式，直接在计算完成后操作Chart实例，逻辑更可靠。
• 通过chart.customText存储动态文本，插件直接读取该值实现中间文本更新。
• 调用chart.update()强制图表重绘，确保新数据即时生效。

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