在加載時加載或激活ChartJS

Question

我將Chart.js設置為表單，以便它從表單中獲取輸入字段，然后單擊Submit / Update按鈕后，它將使用來自輸入字段的這些數字作為數據點來生成一個甜甜圈圖。

問題是如何讓表單或Chart.js運行一次，並在頁面上 （按頁面加載時）生成帶有輸入字段編號的甜甜圈圖。

表單輸入字段已通過HTML5本地存儲空間用數字/數據填充）。

我已經嘗試過jQuery .submit（）; 頁面加載，但沒有任何反應。 感謝您的幫助。 謝謝。

編輯：我已經前進並創建了一個小提琴來重新創建問題。

   $(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放入其中不會有任何區別。