加载或激活ChartJS加载

我有Chart.js设置一个窗体，以便从窗体中获取输入字段并单击Submit/Update按钮后，它会使用输入字段中的这些数字作为数据生成一个圆环图点。加载或激活ChartJS加载

的问题是我怎么能得到的形式或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 
     }); 

    }); 

});

来源

2016-05-31 foojae

我们可以看到代码示例吗？ – Jinjubei

@Jinjubei添加为原文。谢谢！ – foojae

我修剪了代码，基本上它取得了表单中输入的值，在访问者提交时使用这些值使用Chart.js绘制圆环图。我正在寻找一种方法来运行窗体/ Chart.js一次页面加载。 – foojae

你可以把绘制的图表中的函数代码并调用该函数的$(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不会有任何区别。

来源

2016-05-31 15:52:17 leroydev

我放置了'window.onload'，因为这是让图表重新生成并销毁旧图表的唯一方法，这样当访问者更改表单输入中的值并点击时，它就不会在其上重新生成再次提交/更新。我会尝试你的建议。非常感谢！ – foojae

它似乎没有运行Chart.js页面加载后，将其包装在一个函数'drawChart（）;'并在$（document）.ready（function（）'后面调用它仍然得到相同的结果 – foojae

@ foojae请发布一个JSFiddle，其中包含运行它所需的所有代码，以便我们（回答者）可以看到我们正在尝试的结果 – leroydev

加载或激活ChartJS加载

回答

相关问题