在按钮单击/ JavaScript上重新绘制Google图表

debugcn 发表于 Dev

IDMatt

我是.js编程的新手，并且在javascript中使用Google图表时遇到了问题。我使用的是简单的HTML表单，在其中输入一些数据，然后在按钮上单击运行我的脚本。

我希望代码在每次单击按钮时重新绘制（或更新）图表。

问题似乎是，一旦Google库首次完成加载，我的脚本就会在加载命令所在的位置停止执行。

我尝试了这篇Google图表重绘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>

白帽

setOnLoadCallback引用一个function
您要传递a的结果的引用，该引用什么function都没有return...

但实际上并不需要在语句中setOnLoadCallback
包含callbackload

但这只会在页面加载时调用

要在以后重新绘制图表，请尝试这样的操作...

<script>
    var isInit = false;
    function initialize() {

      ...

      if (isInit) {
        loadChartData(total_all);
      } else {
        google.charts.load('current', {
          callback: function () {
            isInit = true;
            loadChartData(total_all);
          },
          packages:['corechart']
        });
      }
    }

    ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。