使用我的计算器数据作为图表中的变量

Question

我有一个用 Jquery 构建的计算器，我想将这些数字传递到我的图表 js 程序，并让图表根据计算中显示的新结果动态调整，

我将如何使用下面的代码来做到这一点？

** 计算器（jquery） **

 jQuery(function($){
    // Function that formats a raw price amount
    function formatPrice( rawPrice ) {
        return rawPrice.toLocaleString("en-US", {
            style: "currency",
            currency: "USD"
        });
    }

    $('form#roi').on('click', '.calculate-roi', function() {
        const cost_by_industry = parseInt($("#cost_by_ind").val()),
            cost_by_employee_count = parseInt($("#cost_by_employee_c").val()),
            no_empoyees = parseInt($("#no_emp").val()),
            month_invest = parseInt($("#month_inv").val()),
            expected_a_grow = 0.05,
            aas = 120000,
            fpr = 0.75,
            avr = 0.75,
            //managed risk year 1
            mr_result1 = ((0.3 * (cost_by_industry + cost_by_employee_count)) / 2) * 0.2,
            //managed risk year 2
            mr_result2 = mr_result1 * (1 + expected_a_grow),
            //managed risk year 3
            mr_result3 = mr_result2 * (1 + expected_a_grow),
            //managed risk total
            mr_results_total = mr_result1 + mr_result2 + mr_result3,
            //Empower Analysts year 1
            ea_result1 = (no_empoyees / 2000) * aas,
            //Empower Analysts year 2
            ea_result2 = ea_result1 * (1 + expected_a_grow),
            //Empower Analysts year 3
            ea_result3 = ea_result2 * (1 + expected_a_grow),
            //Empower Analysts total
            ea_results_total = ea_result1 + ea_result2 + ea_result3,
            //TP year 1
            tp1_results = month_invest * (1 - fpr) * 3 * 2 * (aas / 2080) * 12,
            //fp year 1
            fp1_results = month_invest * fpr * 3 * 1 * (aas / 2080) * 12,
            //TP year 2
            tp2_results = month_invest * (1 - avr) * (1 - fpr) * 3 * 1 * (aas / 2080) * 12,
            //fp year 2
            fp2_results = month_invest * (1 - avr) * fpr * 3 * 0.5 * (aas / 2080) * 12,
            //reduce aleart vol year 1
            rav_results_1 = tp2_results + fp2_results + tp1_results + fp1_results,
            //reduce aleart vol year 2
            rav_results_2 = rav_results_1 * (1 + expected_a_grow),
            //reduce aleart vol year 3
            rav_results_3 = rav_results_2 * (1 + expected_a_grow),
            //reduce aleart vol total
            rav_results_total = rav_results_1 + rav_results_2 + rav_results_3;

        $("#output").show();
        $(".manage_risk_1").text(formatPrice(mr_result1));
        $(".manage_risk_2").text(formatPrice(mr_result2));
        $(".manage_risk_3").text(formatPrice(mr_result3));
        $(".results_total").text(formatPrice(mr_results_total));
        $(".emp_results_1").text(formatPrice(ea_result1));
        $(".emp_results_2").text(formatPrice(ea_result2));
        $(".emp_results_3").text(formatPrice(ea_result3));
        $(".emp_results_total").text(formatPrice(ea_results_total));
        // $(".tp1_results").text(tp1_results);
        // $(".tp2_results").text(tp2_results);
        // $(".fp1_results").text(fp1_results);
        // $(".fp2_results").text(fp2_results);
        $(".rav_results_1").text(formatPrice(rav_results_1));
        $(".rav_results_2").text(formatPrice(rav_results_2));
        $(".rav_results_3").text(formatPrice(rav_results_3));
        $(".rav_results_total").text(formatPrice(rav_results_total));
    });
});

图表JS

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

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";

    var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

var chart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: {
      display: true
    }
  }
});

我已经尝试过

在我的 jquery 的末尾

图表js中的标签文本

 var text = total,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;



window.total = rav_results_total;

Answer 1

计算并获得结果后，您需要使用新数字更新图表。

您可以做的是计算后，调用函数来更新图表。它可能看起来像这样：

function updateData(chart, newData) {
   // or use chart.datasets[0].data.push(...newData) if you want to append
    chart.data.datasets.pop();
    chart.data.datasets.push({
      data: data
    });

   // this is important, we have to call update so 
   // ChartJS can make its magic with the new data
   chart.update();
}

这更像是一个伪代码，希望能让您走上正确的道路。如前所述，最重要的事情是使用新数据调用

chart.update()

。

该文档还提供了有关如何执行此操作的不同示例：https://www.chartjs.org/docs/latest/developers/updates.html