3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

投稿日:

公式サイト

https://developers.google.com/chart

サンプルコード

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Num');

      data.addRows([ [0, 0],   [1, 10],  [2, 20],  [3, 30] ]);

      var options = {
        hAxis: {
          title: 'X'
        },
        vAxis: {
          title: 'Y'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

必要なjsファイルを読み込み(3行目)

必要なライブラリの読み込み(5行目)

google.charts.loadの第一引数には読み込みバージョン名、またはバージョン番号を指定します。
ここでは最新バージョンの’current’を指定しています。

第二引数には読み込むパッケージの配列を渡します。

API読み込み完了後に実行するコールバック関数を設定(6行目)

google.charts.setOnLoadCallback関数の引数にチャートの設定や描画を行う関数を渡します。

チャートのデータを用意

https://developers.google.com/chart/interactive/docs/basic_preparing_data

チャートを生成

ここでは折れ線グラフを描画するため、google.visualization.LineChart関数に描画先の要素を渡し、チャートを生成します。

チャートを描画

chart.draw関数に設定したデータとオプションを渡すと、チャートが描画されます。

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

JavaScriptでMath.jsを用いて組み合わせの数の計算をする

math.combinations関数の第一引数に総数を、第二引数に取り出す数を渡すと、組み合わせの数が返されます。 <html> <head> <script type …

no image

JavaScriptでバイナリからpngファイルを識別する

input要素で指定した画像がpngファイルか確認し、pngファイルだった場合にその幅と高さをコンソールに出力しています。 <html> <head> </head&gt …

no image

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …