ホーム > カテゴリ > HTML5・JavaScript >

[Google Charts]グラフに注釈を付加する

Google Chartsでグラフに注釈を付加するサンプルです。グラフ内のある値にコメントなどを付けたい場合などにご利用できます。

サンプル

注釈のサンプルです。

サンプルコード

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // ライブラリのロード
  // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart)
  google.load('visualization', '1', {'packages':['corechart']});     
         
  // グラフを描画する為のコールバック関数を指定
  google.setOnLoadCallback(drawChart);

  // グラフの描画   
  function drawChart() {         
    
    // メソッドからデータの生成
    var data = new google.visualization.DataTable();
      data.addColumn('string', '年度'); 
      data.addColumn('number', '所得税'); 
      data.addColumn('number', '法人税'); 
      data.addColumn('number', '消費税'); 
      data.addColumn({type:'string', role:'annotation'}); 
      data.addColumn({type:'string', role:'annotationText'}); 
      data.addRows([ 
                     ['H19年度', 16.08, 14.74, 10.27, null, null], 
                     ['H20年度', 14.99, 10.01,  9.97, '注釈', 'リーマンショック'], // 注釈
                     ['H21年度', 12.91,  6.36,  9.81, null, null],
                     ['H22年度', 12.98,  8.97, 10.03, null, null], 
                     ['H23年度', 13.48,  9.35, 10.19, null, null],  
                     ['H24年度', 13.99,  9.76, 10.35, null, null],  
                     ['H25年度', 15.53, 10.49, 10.83, null, null] 
                   ]); 

    // オプションの設定
    var options = {
      title: '所得税・法人税・消費税の年間推移 ( 単位：兆円 )'
     };     
             
    // 指定されたIDの要素に折れ線グラフを作成
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      
    // グラフの描画
    chart.draw(data, options);
  }
  
</script>
</head>
<body>
  
  <!--  グラフの描画エリア -->
  <div id="chart_div" style="width: 100%; height: 350px"></div>
  
</body>
</html>

サンプルの解説

データをDataTable()で生成します。data.addColumn({type:'string', role:'annotation'}); のようにロールに annotation(注釈)と指定すれば任意の値に注釈を付加する事が出来ます。

グラフ関連記事の目次

Google Chartsの使い方とまとめ

出典

ここで公開されているサンプルはGoogle Charts(英語)で公開されているコードにコメントなどを付加してます。





関連記事


前の記事：[Google Charts]グラフのサイズを動的に変更する
次の記事：Google Chartsの使い方とまとめ(日本語)

公開日：2015年04月01日
記事NO：00626


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)