在加载时加载或激活 ChartJS

Question

我已经 Chart.js 设置了一个表单，以便它从表单中获取输入字段，并在单击 Submit/Update 按钮后，它使用输入字段中的这些数字作为数据生成圆环图点.

问题是如何将表格或 Chart.js 转换为运行一次并生成一个带有输入字段数字 [=21] 的圆环图=]当它在页面上时（在页面加载时）。

表单输入字段已通过 HTML5 本地存储填充 numbers/data。

我试过了jQuery.submit();在页面加载但没有任何反应。我感谢任何帮助。谢谢。

编辑：我已经创建了一个 fiddle 来重现问题。

   $(document).ready(function () {

    $("#submit-btn").click(function (e) {

        e.preventDefault();

        var outputyearly = $('#outputyearly');
        var amount = parseInt($('#amount').val().replace(/,/g, ''), 10);
        var rate = parseFloat($('#rate').val(), 10);
        var term = parseFloat($('#term').val(), 10);

        // Some math calculations code

        if (window.onload.myDoughnutChart != null) {
            window.onload.myDoughnutChart.destroy();
        }

        var ctx = document.getElementById("myChart").getContext("2d");

        window.onload.myDoughnutChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: options
        });

    });

});

Answer 1

您可以将绘制图表的代码放在一个函数中，然后在 $(document).ready 和 $("#submit-btn").click 事件上调用该函数，如下所示：

function drawChart() {
  var outputyearly = $('#outputyearly');
  var amount = parseInt($('#amount').val().replace(/,/g, ''), 10);
  var rate = parseFloat($('#rate').val(), 10);
  var term = parseFloat($('#term').val(), 10);

  //Destroy the dougnut chart here, not sure how it's accessible, but it won't work through window.onload

  var ctx = document.getElementById("myChart").getContext("2d");

  new Chart(ctx, {
      type: 'doughnut',
      data: data,
      options: options
  });
}

$(document).ready(function() {
  drawChart();
  $("#submit-btn").click(function (e) {
     e.preventDefault();
     drawChart();
   });
 });

请注意，$(document).ready 已经强制其中的代码在页面完成时执行，因此将 window.onload 放入其中不会有任何区别。

在加载时加载或激活 ChartJS

Loading or Activating ChartJS on Load

html

javascript

forms

jquery

chart.js