1. ホーム
  2. javascript

[解決済み] エラーです。DataTableやDataViewではなく、間違ったタイプのデータでdraw()メソッドを呼びました。

2022-02-10 13:52:25

質問事項

MYSQL-PHP-JSON-Javascriptを使用してGoogleチャートを作成します。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.load = google.load || google.charts.load;
    google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);

      var options = {
            title: 'Req',
          is3D: 'true',          
          width: 750,
          height: 450,
          slices: [{'color':'#581845'},{'color': '#900C3F'},{'color': '#C70039'},{'color': '#FF5733'},{'color': '#FFC300'},{'color': '#DAF7A6'},{'color': '#3498DB'}]
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
</script>

ページを読み込むと、エラーが表示されます。

DataTableやDataViewではなく、間違ったタイプのデータでdraw()メソッドを呼び出したのですね。

ページを更新すると、このエラーはなくなり、円グラフが完全に表示されるようになりました。

googleフォーラム/stackoverflowの投稿を読み、余分なコードを追加しました。

google.load = google.load || google.charts.load;
google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;

を追加し、loader.jsスクリプトも追加しました。この問題を解決するものは何もないようです。 この問題を解決するために、他に何かできることはありますか?

jsonテーブルの作成にはこれを使いました。 PHP MySQL Google Chart JSON - 完全な例

私のJsonテーブルはこんな感じです。

({"cols":[{"label":"Components","type":"string"}, 
{"label":"Count","type":"number"}],"rows":[{"c":[{"v":"SWa"},{"v":600}]}, 
{"c":[{"v":"Sris"},{"v":142}]},{"c":[{"v":"Sgri"},{"v":86}]},{"c": 
[{"v":"Shw"},{"v":36}]},{"c":[{"v":"Syus"},{"v":23}]},{"c":[{"v":"Other"}, 
{"v":21}]},{"c":[{"v":"yutf"},{"v":45}]},{"c":[{"v":"yutr"},{"v":11}]},{"c": 
[{"v":"duh"},{"v":4}]},{"c":[{"v":"Fgth"},{"v":5}]},{"c":[{"v":"Sys"}, 
{"v":34}]},{"c":[{"v":"Opyu"},{"v":6}]},{"c":[{"v":"jth"},{"v":78}]},{"c": 
[{"v":"Unspecified"},{"v":1}]}]});

つまり、これが google.visualization.DataTable に入り、その dataTable が変数 data に渡されるわけです。 var data = new google.visualization.DataTable();

どのように解決するのですか?

削除 jsapi を使用し loader.js

に従って リリースノート ...

jsapi ローダーで利用可能な Google Charts のバージョンは、一貫して更新されなくなりました。今後は新しい gstatic ローダをご利用ください。

を使用する場合 loader.js は、その load の文は...でなければなりません。

google.charts.load('current', {packages: ['corechart']});

とコールバック...

google.charts.setOnLoadCallback(drawChart);