使用動態輸入值創建 Onclick 事件 Google 可視化餅圖

Question

我有 3 個輸入，通過單擊按鈕從其中獲取這些輸入值並根據這些值創建一個 Google 可視化動態餅圖。 我在下面做了這樣的代碼，但沒有得到預期的結果

HTML

 <input type="text" name="BigHalo" id="BigHalo"> <input type="text" name="MediumHalo" id="MediumHalo"> <input type="text" name="SmallHalo" id="SmallHalo"> <button type="button" onclick="onclickChartValur()" >CLICK HERE</button> <div id="donutchart" style="width:380px; height:380px;"></div>

腳本代碼

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart(BigHalo,MediumHalo,SmallHalo) {

 

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['Big Halo',  BigHalo],
      ['Medium Halo',  MediumHalo],
      ['Small Halo',SmallHalo]
    ]);

  var options = {
    legend: 'none',
    pieSliceText: 'label',
    title: '',
    pieStartAngle: 100,
  };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }

  function onclickChartValur() {

    var BigHalo    = $("#BigHalo").val();
    var MediumHalo = $("#MediumHalo").val(); 
    var SmallHalo  = $("#SmallHalo").val(); 

    drawChart(BigHalo,MediumHalo,SmallHalo);

  }


</script>

錯誤結果::

期待結果

Answer 1

解決了！ 我做到了 。 這里我分享一下這個技巧。

HTML

 <input type="text" name="BigHalo" id="BigHalo"> <input type="text" name="MediumHalo" id="MediumHalo"> <input type="text" name="SmallHalo" id="SmallHalo"> <button type="button" onclick="onclickChartValur()" >CLICK HERE</button> <div id="donutchart" style="width:380px; height:380px;"></div>

腳本

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(BigHalo,MediumHalo,SmallHalo) {

var data = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Big Halo',   parseInt(BigHalo)],
  ['Medium Halo',   parseInt(MediumHalo)],
  ['Small Halo', parseInt(SmallHalo)]
]);
var options = {
    legend: 'none',
    title: '',
    pieStartAngle: 100,
  };

var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}

function ontypeChartValur() {

    var BigHalo    = $("#BigHalo").val();
    var MediumHalo = $("#MediumHalo").val(); 
    var SmallHalo  = $("#SmallHalo").val(); 
    drawChart(BigHalo,MediumHalo,SmallHalo);
}

</script>

這個購物車的 OnClick 事件將很容易生成！ 我們也可以使用 onKeyup / onKeydown 事件來實現。

注意：此處使用 parseInt 是因為將字符串轉換為數字。