カレンダー チャート

概要

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

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

今後の Google Charts のリリースで、カレンダーのグラフは大幅に変更される予定です。

カレンダー グラフは、SVG または VML のいずれかを使用して、ユーザーのブラウザにレンダリングされます。他の Google グラフと同様に、カレンダーのグラフでは、ユーザーがデータにカーソルを合わせるとツールチップが表示されます。そして、クレジットの期限となるクレジットです。Google のカレンダー グラフは、D3 カレンダーの視覚化に触発されました。

簡単な例

スポーツチームの参加状況が季節によってどのように異なるかを見てみましょう。 カレンダー グラフを使うと、明るさを使用して値を示して、ユーザーに傾向を一目で確認してもらうことができます。

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

カレンダーのグラフを作成するには、calendar パッケージを読み込んでから、日付用と値用の 2 つの列を作成します。(今後の 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>

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

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

このカレンダーのコードは最初の行に似ていますが、行は次のようになります。

          [ 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,
      }
    }
  };

上のグラフで 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 ポイント、時刻と太字の斜体、枠線を同じ色に設定し、パディングを 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.yearLabelcalendar.underYearSpace を使用してカスタマイズできます。

年フォントを濃い緑の 32pt 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 列(省略可)
使用目的: 期間 オプションのロール
データの種類: date、datetime、timeofday 数値
ロール: domain サポート
オプションの列のロール:

なし

なし

 

設定オプション

名前
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.focusCell

ユーザーが 1 日の正方形にカーソルを合わせると、その日付がハイライト表示されます。

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.underYear スペース

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

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(色 Axis.色)

ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は 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-frame で描画されます)。

型: boolean
デフォルト: false
高さ

グラフの高さ(ピクセル単位)。

タイプ: 数値
デフォルト: 要素を格納する高さ
noDataPattern

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

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

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

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

型: boolean
デフォルト: true
width

グラフの幅(ピクセル単位)です。

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: なし
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
棒グラフや縦棒グラフの最初の系列における 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

戻り値の型: なし
clearChart()

グラフをクリアし、割り当てられているすべてのリソースを解放します。

戻り値の型: なし

イベント

名前
error

グラフのレンダリング中にエラーが発生しました。

プロパティ: ID、メッセージ
onmouseover

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

プロパティ: 行、日付
onmouseout

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

[プロパティ] 行、日付
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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