[JS]if文の条件分岐でGoogleChartを表示したいのですがグラフが表示されません。。

前提・実現したいこと

GoogleChartを使って開発をしているのですが、If文で表示するグラフの種類を分けたいです。
If文を入れてみたところグラフが表示されないです。コンソール上にはエラーは出ておりません。

発生している問題・エラーメッセージ

グラフが表示されない。

該当のソースコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" content="">
    <title>google-chart</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <!-- スクリプト部分 -->
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      let chart;
      let thres;
       
      function drawChart() {
      var dataArray = [['breaks','count']];
      var df = $.Deferred();
        
      $('#search').click(function() {
          $.ajax({
          data: 'post',
          url: "http://localhost:3000/result/"　+ $('#zip').val(),
          dataType : 'json',
          }).done(function(data){
              console.log("success");
              var data_item = data.count.map((c, i) => {
                return [data.breaks[i].toString(), c]; 
              });
              dataArray.push(...data_item);
              console.log(dataArray);
              df.resolve();
              thres = data.thres;
              console.log(thres);
          $(data).each(function(){
          });
          }).fail(function(){
          console.log("error");
          });
      });
   
 
      df.done(function(){
      var chartdata = google.visualization.arrayToDataTable(dataArray);
      //If文の場所がこちらになります。-------------------------------------------------
      if(thres == 1){
      var options = {
            width: 900,
          height: 600,
          pieSliceText: 'value',
         　legend: 'right',
          histogram: {
            hideBucketItems: true,
            bucketSize: 10
          },
          bar: { groupWidth: "100%" },
          colors: ['gray']
             
          };
              chart = new google.visualization.Histogram(document.getElementById('chart_div'));
              chart.draw(chartdata, options);
            }else if(thres == 2){
                chart = new google.charts.Bar(document.getElementById('chart_div'));
            }else if(thres == 4){
                chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            }else if(thres == 9){
                chart = new google.visualization.Histogram(document.getElementById('chart_div'));
            }
      });
      }
      
    </script> 
  </head>
  
  <!-- HTML部分 -->
  <body>
    <div>
        <label for="zip">項目コードを入力：</label><br />
        <input id="zip" type="text" size="10" />
        <input id="search" type="button" value="検索" />
      </div>
    <h1>jsonファイルから表示</h1>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
 
  </body>
</html>

試したこと

if文を実際に入れてみましたが、グラフが表示されません。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

takapiroid

2021/04/01 01:52

以下２点デバッグで確認するといかがでしょうか。・$('#search').click 処理とグラフ表示処理の同期ができているか　　→ ajax 処理の後に if分岐処理を行っているかどうかをconsole.logもしくはBreakポイントおいて確認・if(thres == 1) が true かどうか　　→ そもそもグラフ表示処理を通る処理になっているのか

toyamal

2021/04/01 02:43

確認しましたところ、 if(thres == 1)が先に処理されたあと、$('#search').click 処理がされておりました。 $('#search').click 処理を先に行いたい場合はどうすればよろしいでしょうか？

takapiroid

2021/04/01 05:22

回答に記載しました。こちら試していただいた上、問題がありましたら試したデバッグを含めて回答にコメントお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

クリック時の処理と、グラフ表示処理の同期が取れていないのが原因として回答いたします。

以下が誤りになります。

df.done(function(){

正しくは、

javascript
1df.promise().done(function(){
2

deferred の持つ promise を用いて処理完了を待ちましょう。

また、$searchクリックを何度か行うのを想定しているのならば、
グラフ表示処理を関数化し、クリック毎にその関数を呼び出すのが良いと思います。
その場合 deferred.promise() で完了を待つような処理自体不要になります。

動作確認はしていませんが以下のようにして挙動いかがでしょうか。
スペルミスなどありましたらすみません

javascript
1<script type="text/javascript">
2  // ライブラリ準備
3  google.load("visualization", "1", { packages: ["corechart"] });
4  google.setOnLoadCallback(initialize);
5  var dataArray = [["breaks", "count"]];
6
7
8  // 実際の描画部分
9  function drawChart(thres) {
10	let chart;
11    var chartdata = google.visualization.arrayToDataTable(dataArray);
12    if (thres == 1) {
13      var options = {
14        width: 900,
15        height: 600,
16        pieSliceText: "value",
17        legend: "right",
18        histogram: {
19          hideBucketItems: true,
20          bucketSize: 10,
21        },
22        bar: { groupWidth: "100%" },
23        colors: ["gray"],
24      };
25      chart = new google.visualization.Histogram(
26        document.getElementById("chart_div")
27      );
28      chart.draw(chartdata, options);
29    } else if (thres == 2) {
30	  // chart.draw() はどこでする？
31      chart = new google.charts.Bar(document.getElementById("chart_div"));
32    } else if (thres == 4) {
33	  // chart.draw() はどこでする？
34      chart = new google.visualization.PieChart(
35        document.getElementById("chart_div")
36      );
37    } else if (thres == 9) {
38	  // chart.draw() はどこでする？
39      chart = new google.visualization.Histogram(
40        document.getElementById("chart_div")
41      );
42    }
43  }
44
45  // 描画の準備
46  function initialize() {
47    $("#search").click(function () {
48      $.ajax({
49        data: "post",
50        url: "http://localhost:3000/result/" + $("#zip").val(),
51        dataType: "json",
52      })
53        .done(function (data) {
54          console.log("success");
55          var data_item = data.count.map((c, i) => {
56            return [data.breaks[i].toString(), c];
57          });
58          dataArray.push(...data_item);
59          console.log(dataArray);
60          //   thres = data.thres;
61          //   console.log(thres);
62		  $(data).each(function () {});
63		  drawChart(data.thres);
64        })
65        .fail(function () {
66          console.log("error");
67        });
68    });
69  }
70</script>