2
我是新來的.js編程和我在JavaScript中的谷歌圖表的問題。 我使用簡單的HTML表單輸入一些數據,然後在按鈕上單擊我的腳本運行。重新繪製谷歌圖表上的按鈕點擊/ javascript
我想代碼重新繪製(或更新)每個按鈕單擊圖表。
這個問題似乎是,一旦谷歌庫第一次完成加載,我的腳本停止執行加載命令的地方。
我試過從這個職位Google chart redraw onclick的解決方案,但它並沒有爲我工作。
文件看起來是這樣的:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form">
<!------------------------------------------------------------------------------------------------------>
\t <div id="gender">
\t \t <h3>Gender</h3>
\t \t <fieldset>
\t \t \t <input type="radio" id="male" name="gender_select" class="optGender" value="männlich" checked><span class="optGender">male</span></input><br>
\t \t \t <input type="radio" id="female" name="gender_select" class="optGender" value="weiblich" ><span class="optGender">female</span></input><br>
\t \t \t Bodyweight: <input type="text" id="bodyweight"></input>
\t \t </fieldset>
\t </div>
<!------------------------------------------------------------------------------------------------------>
\t <div id="chart">
\t </div>
<!------------------------------------------------------------------------------------------------------>
\t <div id="squat">
\t \t <p>
\t \t \t <h3>Squat</h3>
\t \t \t <fieldset>
\t \t \t \t <span class="spreps">Reps</span><input type="text" id="reps_squat" required><br>
\t \t \t \t <span class="spweight">Weight</span><input type="text" id="weight_squat" required><br>
\t \t \t \t <span class="spmax">Calculated Max</span><input type="text" id="total_squat" readonly><br>
\t \t \t </fieldset>
\t \t </p>
\t </div>
<!------------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------------>
\t <div id="bench">
\t \t <p> \t
\t \t \t <h3>Benchpress</h3>
\t \t \t <fieldset>
\t \t \t \t <span class="spreps">Reps</span><input type="text" id="reps_bench" required><br>
\t \t \t \t <span class="spweight">Weight</span><input type="text" id="weight_bench" required><br>
\t \t \t \t <span class="spmax">Calculated Max</span><input type="text" id="total_bench" readonly><br>
\t \t \t </fieldset>
\t \t </p>
\t </div>
<!------------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------------>
\t <div id="deadlift">
\t \t <p>
\t \t \t <h3>Deadlift</h3>
\t \t \t <fieldset>
\t \t \t \t <span class="spreps">Reps</span><input type="text" id="reps_deadlift" required><br>
\t \t \t \t <span class="spweight">Weight</span><input type="text" id="weight_deadlift" required><br>
\t \t \t \t <span class="spmax">Calculated Max</span><input type="text" id="total_deadlift" readonly><br>
\t \t \t </fieldset>
\t \t </p>
\t </div> \t
<!------------------------------------------------------------------------------------------------------>
\t <p>
\t \t <input type="button" alt="Berechnen" class="button" id="btn_calcTotal" value="Total berechnen" onclick="initialize()">
\t </p>
<!------------------------------------------------------------------------------------------------------>
\t <div id="total">
\t \t <p>
\t \t <h3>calculated Total</h3>
\t \t \t <input type="text" id="total_all" readonly>
\t \t </p>
\t </div>
<!------------------------------------------------------------------------------------------------------>
\t <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!------------------------------------------------------------------------------------------------------>
\t <script>
\t \t function initialize() {
\t // delete old entries
\t document.getElementById("total_squat").value = "";
\t document.getElementById("total_bench").value = "";
\t document.getElementById("total_deadlift").value = "";
\t document.getElementById("total_all").value = "";
\t
\t // read weight
\t var dWeight = parseFloat(document.getElementById("bodyweight").value);
\t
\t // read gender & get weightclass
\t var sGender = "";
\t \t if (document.getElementById("male").checked == true) {
\t \t \t sGender = document.getElementById("male").value;
\t \t }
\t \t else {
\t \t \t sGender = document.getElementById("female").value;
\t \t }
\t
\t // read exercise values
\t var irepsSquat = parseFloat(document.getElementById("reps_squat").value.replace(',','.'));
\t var dweightSquat = parseFloat(document.getElementById("weight_squat").value.replace(',','.'));
\t var irepsBench = parseFloat(document.getElementById("reps_bench").value.replace(',','.'));
\t var dweightBench = parseFloat(document.getElementById("weight_bench").value.replace(',','.'));
\t var irepsDeadlift = parseFloat(document.getElementById("reps_deadlift").value.replace(',','.'));
\t var dweightDeadlift = parseFloat(document.getElementById("weight_deadlift").value.replace(',','.'));
\t
\t // check if reps & weight are valid -> calculate (Squat)
\t if (check(irepsSquat) || check(dweightSquat)) {
\t \t window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
\t \t return;
\t }
\t else {
\t \t var total_sq = calculate(irepsSquat, dweightSquat);
\t }
\t // check if reps & weight are valid -> calculate (Benchpress)
\t if (check(irepsBench) || check(dweightBench)){
\t \t window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
\t \t return;
\t }
\t else {
\t \t var total_bp = calculate(irepsBench, dweightBench);
\t }
\t // check if reps & weight are valid -> calculate (Deadlift)
\t if (check(irepsBench) || check(dweightBench)){
\t \t window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
\t \t return;
\t }
\t else {
\t \t var total_dl = calculate(irepsDeadlift, dweightDeadlift);
\t }
\t
\t // calculate total & wilk points -> write it
\t document.getElementById("total_squat").value = total_sq;
\t document.getElementById("total_bench").value = total_bp;
\t document.getElementById("total_deadlift").value = total_dl;
\t
\t var total_all = (parseFloat(total_sq) + parseFloat(total_bp) + parseFloat(total_dl)).toFixed(2);
\t document.getElementById("total_all").value = total_all;
\t \t \t \t \t \t \t \t \t \t \t \t \t
\t // Load the Visualization API
google.charts.load("current", {packages:['corechart']});
\t
// Set a callback to run when the Google Visualization API is loaded.
\t google.charts.setOnLoadCallback(loadChartData(total_all));
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Checks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function check(val) {
\t if (isNaN(val)) \t {
\t \t return true;
\t }
\t else {
\t \t return false;
\t }
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ calculate 1RM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function calculate(iReps, dWeightE) {
\t \t \t return (dWeightE/(1.0278-(0.0278*iReps))).toFixed(2);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function loadChartData(total_all) {
\t var dnorm1 = 300;
\t var dnorm2 = 450;
\t
\t // Create the data table
\t var data = new google.visualization.DataTable();
\t data.addColumn('string', 'label');
\t data.addColumn('number', 'Weight');
\t data.addRows([
\t ['Own Total', parseFloat(total_all)],
\t ['Kadernorm 1', parseFloat(dnorm1)],
\t ['Kadernorm 2', parseFloat(dnorm2)]
\t ]);
\t drawChart(data);
}
function drawChart(data) {
\t // Instantiate new chart
\t var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
\t
\t // Set chart options
\t var options = {'title':'Comparison of own Total vs. national team levels in kg',
\t \t \t \t 'width':700,
\t \t \t \t 'height':400,
\t \t \t \t };
\t // Draw chart, passing in some options
\t chart.draw(data, options);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
\t </script>
</form>
</body>
</html>
喜的WhiteHat不幸的是,這不會改變代碼的行爲方式。我用你的代碼替換了我的代碼,並且它有一次工作。如果我再次單擊該按鈕,圖表不會重繪自己......也許該語句只會執行一次?有沒有辦法「銷燬」圖表對象?或者我可以使用不同的事件刷新/重繪圖表? – IDMatt
瞭解它,看編輯回答... – WhiteHat
有點容易,如果你知道該怎麼做:D thx男人,它現在的作品 – IDMatt