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

動画を埋め込むHTML要素<video>の使い方

動画を埋め込む 以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。 <video src="movie.mp4"></ …

no image

HTMLからWindowsの設定ページを開く

ms-settings: URIスキームを用いて、HTMLのリンク先に特殊なURIを指定することで、ブラウザからWindowsの設定アプリの該当ページを開くことができます。 以下のようなHTMLコード …

no image

HTML – svgタグで図形を描画する

サンプルコード <!DOCTYPE html> <html> <head> </head> <body> <svg width=&qu …

no image

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

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

no image

JavaScriptで呼び出し回数をカウントする関数Console.count

引数に任意のラベルを指定すると、ラベルごとに呼び出された回数をカウントし、現在の呼び出し回数を出力します。ラベルを省略した場合はラベルにdefaultを指定したものとして扱われます。 Console. …