【发布时间】：2016-06-11 13:52:09
【问题描述】：
我是 .js 编程的新手，我对 javascript 中的谷歌图表有疑问。 我正在使用一个简单的 HTML 表单，在其中输入一些数据，然后在按钮上单击我的脚本运行。
我希望代码在每次按钮点击时重新绘制（或更新）图表。
问题似乎是，一旦 google 库第一次完成加载，我的脚本就会在加载命令所在的位置停止执行。
我尝试了这篇帖子 Google chart redraw onclick 中的解决方案，但它对我不起作用。
文件如下所示：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form">
<!------------------------------------------------------------------------------------------------------>
<div id="gender">
<h3>Gender</h3>
<fieldset>
<input type="radio" id="male" name="gender_select" class="optGender" value="männlich" checked><span class="optGender">male</span></input><br>
<input type="radio" id="female" name="gender_select" class="optGender" value="weiblich" ><span class="optGender">female</span></input><br>
Bodyweight: <input type="text" id="bodyweight"></input>
</fieldset>
</div>
<!------------------------------------------------------------------------------------------------------>
<div id="chart">
</div>
<!------------------------------------------------------------------------------------------------------>
<div id="squat">
<p>
<h3>Squat</h3>
<fieldset>
<span class="spreps">Reps</span><input type="text" id="reps_squat" required><br>
<span class="spweight">Weight</span><input type="text" id="weight_squat" required><br>
<span class="spmax">Calculated Max</span><input type="text" id="total_squat" readonly><br>
</fieldset>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------------>
<div id="bench">
<p>
<h3>Benchpress</h3>
<fieldset>
<span class="spreps">Reps</span><input type="text" id="reps_bench" required><br>
<span class="spweight">Weight</span><input type="text" id="weight_bench" required><br>
<span class="spmax">Calculated Max</span><input type="text" id="total_bench" readonly><br>
</fieldset>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------------>
<div id="deadlift">
<p>
<h3>Deadlift</h3>
<fieldset>
<span class="spreps">Reps</span><input type="text" id="reps_deadlift" required><br>
<span class="spweight">Weight</span><input type="text" id="weight_deadlift" required><br>
<span class="spmax">Calculated Max</span><input type="text" id="total_deadlift" readonly><br>
</fieldset>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<p>
<input type="button" alt="Berechnen" class="button" id="btn_calcTotal" value="Total berechnen" onclick="initialize()">
</p>
<!------------------------------------------------------------------------------------------------------>
<div id="total">
<p>
<h3>calculated Total</h3>
<input type="text" id="total_all" readonly>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!------------------------------------------------------------------------------------------------------>
<script>
function initialize() {
// delete old entries
document.getElementById("total_squat").value = "";
document.getElementById("total_bench").value = "";
document.getElementById("total_deadlift").value = "";
document.getElementById("total_all").value = "";
// read weight
var dWeight = parseFloat(document.getElementById("bodyweight").value);
// read gender & get weightclass
var sGender = "";
if (document.getElementById("male").checked == true ) {
sGender = document.getElementById("male").value;
}
else {
sGender = document.getElementById("female").value;
}
// read exercise values
var irepsSquat = parseFloat(document.getElementById("reps_squat").value.replace(',','.'));
var dweightSquat = parseFloat(document.getElementById("weight_squat").value.replace(',','.'));
var irepsBench = parseFloat(document.getElementById("reps_bench").value.replace(',','.'));
var dweightBench = parseFloat(document.getElementById("weight_bench").value.replace(',','.'));
var irepsDeadlift = parseFloat(document.getElementById("reps_deadlift").value.replace(',','.'));
var dweightDeadlift = parseFloat(document.getElementById("weight_deadlift").value.replace(',','.'));
// check if reps & weight are valid -> calculate (Squat)
if (check(irepsSquat) || check(dweightSquat)) {
window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
return;
}
else {
var total_sq = calculate(irepsSquat, dweightSquat);
}
// check if reps & weight are valid -> calculate (Benchpress)
if (check(irepsBench) || check(dweightBench)){
window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
return;
}
else {
var total_bp = calculate(irepsBench, dweightBench);
}
// check if reps & weight are valid -> calculate (Deadlift)
if (check(irepsBench) || check(dweightBench)){
window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
return;
}
else {
var total_dl = calculate(irepsDeadlift, dweightDeadlift);
}
// calculate total & wilk points -> write it
document.getElementById("total_squat").value = total_sq;
document.getElementById("total_bench").value = total_bp;
document.getElementById("total_deadlift").value = total_dl;
var total_all = (parseFloat(total_sq) + parseFloat(total_bp) + parseFloat(total_dl)).toFixed(2);
document.getElementById("total_all").value = total_all;
// Load the Visualization API
google.charts.load("current", {packages:['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(loadChartData(total_all));
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Checks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function check(val) {
if (isNaN(val)) {
return true;
}
else {
return false;
}
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ calculate 1RM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function calculate(iReps, dWeightE) {
return (dWeightE/(1.0278-(0.0278*iReps))).toFixed(2);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function loadChartData(total_all) {
var dnorm1 = 300;
var dnorm2 = 450;
// Create the data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'label');
data.addColumn('number', 'Weight');
data.addRows([
['Own Total', parseFloat(total_all)],
['Kadernorm 1', parseFloat(dnorm1)],
['Kadernorm 2', parseFloat(dnorm2)]
]);
drawChart(data);
}
function drawChart(data) {
// Instantiate new chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
// Set chart options
var options = {'title':'Comparison of own Total vs. national team levels in kg',
'width':700,
'height':400,
};
// Draw chart, passing in some options
chart.draw(data, options);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</script>
</form>
</body>
</html>【问题讨论】：
标签： javascript html google-visualization