CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

ウェブページにGoogle Chartsを追加する方法｜コード例付きで解説

Google Chartsは、Googleが提供する無料のJavaScriptライブラリで、HTMLとJavaScriptだけでインタラクティブなグラフやチャートを簡単に作成できるツールです。この記事では、自分のウェブページにGoogle Chartsの棒グラフを追加する具体的な手順を、実際のコード例とともに解説します。

Google Chartsを使うための基本ステップ

Google Chartsを利用する流れはシンプルで、主に以下の3つのステップで構成されます。

  1. ローダーの読み込み：<head>タグ内でGoogle Chartsのローダー（loader.js）をCDN経由で読み込みます。
  2. パッケージのロード：google.charts.load()メソッドで、使用したいパッケージ（ここでは「corechart」）を指定します。
  3. チャートの描画：google.charts.setOnLoadCallback()を使い、ライブラリの読み込み完了後に描画関数を呼び出します。

コード例

以下は、2013年から2017年までの年ごとのデータを横棒グラフとして表示するサンプルコードです。そのままコピーしてHTMLファイルに貼り付ければ、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
   google.charts.load("current", { packages: ["corechart"] });
</script>
<style>
   .barchartContainer {
      width: 550px;
      height: 400px;
      margin: 0 auto;
      font-weight: bold;
   }
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
</style>
</head>
<body>
<h1 style="text-align: center;">
Adding google charts to your web page Example
</h1>
<div class="barchartContainer"></div>
<script language="JavaScript">
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
         ["Year", "India"],
         ["2013", 500],
         ["2014", 800],
         ["2015", 1000],
         ["2016", 1200],
         ["2017", 1400]
      ]);
      var options = { title: "Educated people(in millions)" };
      var chart = new google.visualization.BarChart(
         document.querySelector(".barchartContainer")
      );
      chart.draw(data, options);
   }
   google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

コードのポイント

  • arrayToDataTable()：配列形式のデータを、Google Chartsで扱えるデータテーブルに変換します。1行目がヘッダー（「Year」「India」）、2行目以降が実際のデータになります。
  • options：チャートのタイトルなど、見た目に関する設定をオブジェクト形式で指定します。
  • barchartContainer：CSSで幅550px・高さ400pxに設定されたコンテナ要素の中に、チャートが描画されます。

出力結果

上記のコードをブラウザで開くと、「Educated people(in millions)」というタイトルの横棒グラフが画面中央に表示され、2013年の500から2017年の1400へと増加する傾向がひと目でわかります。

  1. Googleドキュメントにフォントを追加する方法｜標準メニューとアドオンの使い方

    Googleドキュメントは、多くの人に愛用されている無料のワープロツールです。しかし、「選べるフォントの種類が少なくて物足りない」と感じている方も少なくありません。 実は、Googleドキュメントにはフォントを追加する方法があります。主な方法としては、あらかじめ用意されている「その他のフォント」メニューからフォントを追加する方法と、アドオンを使って外部フォントを利用する方法の2つがあります。 パソコンのフォントをGoogleドキュメントで使える？ 現時点では、パソコンにインストール済みのフォントをGoogleドキュメントにアップロードして使うことはできません。利用できるのは、Googleドキュ

  2. Google検索の人物カード(People Card)とは?作成・追加方法を徹底解説

    現代において、広告やプロモーションは非常に重要です。ビジネスでもポートフォリオでも、強力なオンラインプレゼンスを持つことは、キャリアアップに大きく貢献します。Googleのおかげで、誰かがGoogleであなたの名前を検索したときに、あなたを見つけてもらいやすくなりました。そう、その通りです。自分の名前やビジネス名が検索結果に表示されるようになるのです。名前とともに、簡単な経歴、職業、SNSアカウントへのリンクなどの関連情報も、見やすいカード形式にまとめて表示できます。これが「People Card(人物カード)」と呼ばれるGoogleの新機能です。この記事では、この機能について詳しく解説し、G