ボタンをクリックしてGoogleグラフを再描画する/ javascript

私は.jsプログラミングの初心者です.JavaScriptでGoogleグラフに問題があります。私はいくつかのデータを入力してから、ボタンをクリックしてスクリプトを実行するという単純なHTMLフォームを使用しています。ボタンをクリックしてGoogleグラフを再描画する/ javascript

ボタンクリックごとにグラフを再描画（または更新）したいと思います。

問題は、Googleのライブラリが初めて読み込まれると、読み込みコマンドが実行されるポイントでスクリプトが実行を停止するように見えます。

私はこの投稿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>

出典

2016-06-11 IDMatt

setOnLoadCallbackはあなたがいないreturn何もしないfunction、結果を渡しているfunction
への参照を取ります.. 。

実際には必要ありません。setOnLoadCallback
はload声明

でcallbackを含むが、ページのロード時

これが唯一のホワイトハットハイテク

<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'] 
     }); 
     } 
    } 

    ...

出典

2016-06-11 20:31:50 WhiteHat

...このような何かをしようと、その後の再描画チャートに呼び出されます残念ながら、これはコードの振る舞いを変更しません。私は自分のコードをあなたのものに置き換え、それは一度しか働かない。ボタンを2回目にクリックすると、チャート自体が再描画されません。おそらくステートメントは1回だけ行われますか？グラフオブジェクトを「破壊する」方法はありますか？または別のイベントでチャートをリフレッシュ/再描画することはできますか？ – IDMatt

それを入手しました、編集するには... – WhiteHat

あなたがそれを行う方法を知っていれば簡単です：D thx man、それは今動作します – IDMatt

ボタンをクリックしてGoogleグラフを再描画する/ javascript

答えて

関連する問題