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で値が素数か判定する

以下のコードでは、渡された値が素数か判定する関数isPrimeNumberを定義しています。 Number.isIntegerで引数が整数か判定し、その後1から引数で渡された値の範囲で引数の値を割って …

no image

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

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

no image

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

公式サイト https://c3js.org/ サンプルコード Getting Startedページのサンプルを動かしてみます。https://c3js.org/gettingstarted.html …

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)