カレンダー グラフ

  1. Overview
  2. 簡単な例
  3. 日
  4. 週
  5. 月
  6. 年
  7. 読み込んでいます
  8. データ形式
  9. 構成オプション
  10. メソッド
  11. イベント
  12. データポリシー

概要

注: JavaScript ではゼロから始まる月がカウントされます（1 月は 0、2 月は 1、12 月は 11）。カレンダー グラフが 1 か月ずつずれているのは、これが理由です。

カレンダー グラフは、月や年などの長い期間におけるアクティビティを示すために使用される可視化です。曜日によって数量がどのように変化するか、または時間の経過とともにどのように変化するかを示す場合に最適です。

カレンダー グラフは、Google グラフの今後のリリースで大幅に改訂される可能性があります。

カレンダーのグラフは、ユーザーのブラウザに適した SVG または VML を使用してブラウザに表示されます。すべての Google グラフと同様に、カレンダー グラフではデータにカーソルを合わせるとツールチップが表示されます。貢献度の必要な単位: カレンダー グラフは 3 日目のカレンダーの可視化にヒントを得たものです。

簡単な例

たとえば、スポーツチームの出欠状況がシーズンを通じてどのように変動したかを表示するとします。カレンダー グラフでは、明るさで値を示し、傾向を一目で確認できるようにすることができます。

個々の日付にカーソルを合わせると、基になるデータ値が表示されます。

カレンダー グラフを作成するには、calendar パッケージを読み込み、2 つの列（日付用と値用に 1 つずつ）を作成します。（Google Charts の今後のリリースでは、スタイル設定をカスタマイズするためのオプションの 3 つ目の列が追加される予定です）。

次に、以下のように、行に日付と値のペアを入力します。

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

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

日数

カレンダー グラフの各正方形は日を表します。現時点では、データセルの色はカスタマイズできませんが、Google Charts の次のリリースで変更される予定です。

データ値がすべて正の場合、色は白から青の範囲となり、最も濃い青が最大値を示します。負のデータ値がある場合、以下に示すようにオレンジ色で表示されます。

このカレンダーのコードは、最初の例とほぼ同じですが、行は次のようになります。

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

次のように calendar.cellSize オプションを使用して、日付（「セル」）のサイズを変更できます。

ここでは、calendar.cellSize を 10 に変更しました。これにより、日数が短くなり、グラフ全体が縮小されます。

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

データ値がない日は、noDataPattern オプションを使用してカスタマイズできます。

ここでは、color を明るい青に、backgroundColor をやや濃い色合いに設定します。

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

calendar.cellColor では、セルの枠線の色、枠線の太さ、不透明度を制御できます。

monthOutlineColor と区別できるストロークの色を選択するか、不透明度を低くするよう注意する必要があります。上記のグラフのオプションは次のとおりです。

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

上のグラフで日付にフォーカスを合わせると、枠線が赤でハイライト表示されます。この動作は、calendar.focusedCellColor オプションを使用して制御できます。 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

週

デフォルトでは、曜日は日曜日から土曜日の最初の文字でラベル付けされます。曜日の順序は変更できませんが、calendar.daysOfWeek オプションで使用する文字は変更できます。また、calendar.dayOfWeekRightSpace を使用して曜日とグラフの間のパディングを制御し、calendar.dayOfWeekLabel を使用してテキスト スタイルをカスタマイズできます。

ここでは、週のラベルのフォントを変更し、ラベルとグラフデータの間に 10 ピクセルのパディングを追加し、月曜日から週を開始します。

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

月

デフォルトでは、月は濃いグレーの線で識別されます。枠線を制御するには calendar.monthOutlineColor オプション、ラベルのフォントをカスタマイズするには calendar.monthLabel オプション、ラベルのパディングを調整するには calendar.underMonthSpace オプションを使用します。

ラベルのフォントを濃い赤の 12 pt Times-Roman 太字斜体に設定し、枠線を同じ色に設定して、16 ピクセルのパディングを配置しました。月の枠線は使用していないため、同じ色合いの薄い色に設定されています。

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

年

カレンダー グラフの年は常にグラフの左端に表示されます。calendar.yearLabel と calendar.underYearSpace を使用してカスタマイズできます。

年のフォントを濃い緑の 32 pt Times-Roman 太字斜体に設定し、年ラベルとグラフの下部の間に 10 ピクセルを追加します。

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

読み込んでいます

google.charts.load パッケージ名は "calendar" です。

  google.charts.load("current", {packages: ["calendar"]});

ビジュアリゼーションのクラス名は google.visualization.Calendar です。

  var visualization = new google.visualization.Calendar(container);

データ形式

行: テーブルの各行は日付を表します。

Columns:

  列 0 列 1 ... 列 N（省略可）
目的: 日付 Values ... オプションのロール
データ型: date、datetime、または timeofday 数値 ...
ロール: ドメイン データ ...
オプションの列ロール:

まったく管理できない

まったく管理できない

 ...

 

構成オプション

名前
calendar.cellColor

calendar.cellColor オプションを使用すると、カレンダーの日付のスクエアの枠線をカスタマイズできます。

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
     
タイプ: オブジェクト
デフォルト: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

暦日の正方形のサイズ:

var options = { calendar: { cellSize: 10 } };
     
型: integer
デフォルト: 16
calendar.dayOfWeekLabel

グラフの上部にある週のラベルのフォント スタイルを制御します。

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
     
タイプ: オブジェクト
デフォルト: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

週ラベルの右端からグラフの曜日の正方形の左端までの距離。

型: integer
デフォルト: 4
calendar.daysOfWeek

日曜日から土曜日に使用する 1 文字のラベル。

型: string
デフォルト: 'SMTWTFS'
calendar.focusedCellColor

ユーザーが日付の正方形にフォーカスを合わせる（たとえばカーソルを合わせる）と、カレンダー グラフでその正方形がハイライト表示されます。

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
     
タイプ: オブジェクト
デフォルト: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

月のラベルのスタイル。例:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
     
タイプ: オブジェクト
デフォルト: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

データ値が含まれる月は、このスタイルでは枠線によって他の月と区別されます。

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
     
（calendar.unusedMonthOutlineColor も参照）
タイプ: オブジェクト
デフォルト: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

月のラベルの下部と日の上部の正方形の間のピクセル数:

var options = { calendar: { underMonthSpace: 12 } };
型: integer
デフォルト: 6
calendar.underYearSpace

最も下の年のラベルとグラフの下部の間のピクセル数:

var options = { calendar: { underYearSpace: 2 } };
型: integer
デフォルト: 0
calendar.unusedMonthOutlineColor

データ値がない月は、このスタイルでは枠線を使用して他の月と線引きされます。

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
     
（calendar.monthOutlineColor も参照）
タイプ: オブジェクト
デフォルト: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

カラー列の値と、色またはグラデーション スケールのマッピングを指定するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
タイプ: オブジェクト
デフォルト: null
colorAxis.colors

ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は HTML カラー文字列です（例: colorAxis: {colors:['red','#004411']}）。2 つ以上の値が必要です。グラデーションには、すべての値と計算された中間値が含まれます。最初の色が最小値、最後の色が最大値になります。

型: 色文字列の配列
デフォルト: null
colorAxis.maxValue

存在する場合、グラフの色データの最大値を指定します。この値以上のカラーデータ値は、colorAxis.colors 範囲の最後の色としてレンダリングされます。

タイプ: 数値
デフォルト: グラフデータの色列の最大値
colorAxis.minValue

存在する場合、グラフの色データの最小値を指定します。この値以下のカラーデータ値は、colorAxis.colors 範囲の最初の色としてレンダリングされます。

タイプ: 数値
デフォルト: グラフデータの色列の最小値
colorAxis.values

指定する場合は、値を色に関連付ける方法を制御します。各値は、colorAxis.colors 配列内の対応する色に関連付けられています。これらの値は、グラフのカラーデータに適用されます。色付けは、ここで指定した値のグラデーションに従って行われます。このオプションに値を指定しないことは、[minValue, maxValue] を指定するのと同じことです。

型: 数値の配列
デフォルト: null
forceIFrame

インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。

型: boolean
デフォルト: false
身長

グラフの高さ（ピクセル単位）。

タイプ: 数値
デフォルト: 含まれる要素の高さ
noDataPattern

カレンダーのグラフでは、特定の日のデータがないことを示すストライプの対角線パターンが使用されます。グレースケールのデフォルトをオーバーライドするには、noDataPattern.backgroundColor オプションと noDataPattern.color オプションを使用します。次に例を示します。

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
     
タイプ: オブジェクト
デフォルト: null
tooltip.isHtml

HTML レンダリングではなく SVG レンダリングのツールチップを使用するには、false に設定します。詳細については、 ツールチップ コンテンツのカスタマイズ をご覧ください。

注: ツールチップ列のデータロールによる HTML ツールチップ コンテンツのカスタマイズは、円グラフとバブルチャートの可視化ではサポートされていません。

型: boolean
デフォルト: true
幅

グラフの幅（ピクセル単位）。

タイプ: 数値
デフォルト: 含まれる要素の幅

メソッド

メソッド
draw(data, options)

グラフを描画します。グラフは、ready イベントが発生した後にのみ、それ以上のメソッド呼び出しを受け入れます。Extended description。

戻り値の型: none
getBoundingBox(id)

グラフ要素 id の左、上、幅、高さを含むオブジェクトを返します。id の形式はまだ文書化されていません（これらはイベント ハンドラの戻り値です）が、以下に例を示します。

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
横棒グラフまたは縦棒グラフの 1 つ目の系列における 3 つ目の棒の幅
cli.getBoundingBox('bar#0#2').width
円グラフの 5 番目のくさびの境界ボックス
cli.getBoundingBox('slice#4')
縦棒グラフ（縦棒グラフなど）のグラフデータの境界ボックス:
cli.getBoundingBox('vAxis#0#gridline')
横棒グラフなど）のグラフデータの境界ボックス:
cli.getBoundingBox('hAxis#0#gridline')

値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。

戻り値の型: オブジェクト
getSelection()

選択したグラフ エンティティの配列を返します。 選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に対応します（列インデックスが null）。 このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。 Extended description 。

戻り値の型: 選択要素の配列
setSelection()

指定したグラフ エンティティを選択します。前の選択をキャンセルします。 選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に対応します（列インデックスが null）。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description 。

戻り値の型: none
clearChart()

チャートを消去し、割り当て済みリソースをすべて解放します。

戻り値の型: none

イベント

名前
error

グラフのレンダリング中にエラーが発生したときに呼び出されます。

プロパティ: id、message
onmouseover

ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。エンティティの行インデックスと日付値を渡します。エンティティにデータテーブル要素がない場合、行インデックスに対して返される値は undefined です。

Properties: row、date
onmouseout

ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。エンティティの行インデックスと日付値を渡します。エンティティにデータテーブル要素がない場合、行インデックスに対して返される値は undefined です。

Properties 行、日付
ready

グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。

Properties（プロパティ）: なし
select

ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、getSelection() を呼び出します。

Properties（プロパティ）: なし

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。