[英]Loading or Activating ChartJS on Load
我将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
});
});
});
您可以将绘制图表的代码放在一个函数中,然后在$(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
放入其中不会有任何区别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.