[解決済み] エラーです。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);
関連
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み] テスト
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される