タイムライン

  1. Overview
  2. 簡単な例
  3. 棒にラベルを付ける
  4. 高度な例
  5. 棒を 1 行に配置する
  6. フォントの変更
  7. 色の制御
  8. グリッド線が重なって表示される
  9. ツールチップのカスタマイズ
  10. 読み込んでいます
  11. データ形式
  12. 構成オプション
  13. メソッド
  14. イベント
  15. データポリシー

概要

タイムラインは、一連のリソースの使用状況の推移を示すグラフです。ソフトウェア プロジェクトを管理していて、誰がいつ何をしているかを示す必要がある場合や、会議を主催して会議室をスケジュールする必要がある場合、タイムラインは合理的な選択肢になることがよくあります。一般的なタイムラインの種類の 1 つは、ガントチャートです。

注: JavaScript の Date オブジェクトでは、月は 0 から 11 までのインデックスが付きます。1 月が 0 か月、12 月が 11 か月目です。タイムラインが 1 か月ずれていると思われる場合は、これが理由と考えられます。詳細については、日付と時刻のページをご覧ください。

簡単な例

たとえば、アメリカの大統領が任期を掲げた時期をプロットするとします。ここで、「リソース」は大統領であり、各大統領の任期をバーとしてプロットできます。

バーにカーソルを合わせると、ツールチップが表示され、詳細情報を確認できます。

timeline パッケージを読み込み、ページがレンダリングされたときにグラフを描画するコールバックを定義した後、drawChart() メソッドは google.visualization.Timeline() をインスタンス化し、大統領ごとに 1 行で dataTable を埋めます。

dataTable 内で、最初の列は大統領の名前、2 列目と 3 列目は開始時刻と終了時刻です。これらは JavaScript の Date 型ですが、通常の数値にすることもできます。

最後に、グラフの draw() メソッドを呼び出します。このメソッドは、drawChart() の最初の行で container が宣言されたときに使用されたものと同じ識別子（timeline）を持つ div 内にグラフを表示します。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

Google グラフのタイムラインはカスタマイズ可能です。次の例では、タイムラインの外観を調整する一般的な方法について説明します。

棒にラベルを付ける

行ラベル（上記の「Washington」、「Adams」、「Jefferson」）に加えて、個々のバーにラベルを付けることもできます。ここでは、行ラベルを単純な数字に変更し、各大統領の名前をバーに配置します。

このコードでは、バーラベル（各大統領のフルネーム）を保持する新しい列をデータに挿入しています。タイムライン dataTable に 4 つの列がある場合、1 列目は行ラベル、2 列目はバーラベル、3 列目と 4 列目は開始と終了として解釈されます。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

上記の新しい行ラベルはあまり有益ではないため、タイムラインの showRowLabels オプションを使用して削除しましょう。

デフォルトでは、showRowLabels は true です。false に設定すると、行ラベルが削除されます。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

高度な例

タイムラインをより複雑にするために、副大統領と国務長官をグラフに追加しましょう。ジョン・アダムズは大統領になる前は副社長、トーマス・ジェファーソンは国務長官、その後は副大統領、そして最終的には大統領を務めました。

タイムラインでは、リソースは複数の行に表示される場合でも同じ色で表示されるため、次のグラフでは各人を一貫した色で表しています。

一部の国務長官は非常に短期間の任務に就いたため、このグラフはラベル付けのテストに適しています。バーに対してラベルが大きすぎる場合は、バーのサイズに応じて省略されるか削除されます。ユーザーはいつでもバーにカーソルを合わせると、ツールチップ情報が表示されます。

タイムラインでは、行が順番に（副大統領、国務長官、大統領、国務長官の順に）配置されます。以下のコードでは、このように配置されています。ただし、棒のレイアウトは開始時間と終了時間のみによって決まるため、dataTable で 2 人の国務長官または 2 人の大統領を入れ替えても、グラフには影響しません。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

棒を 1 行に配置する

法王とは異なり、米国大統領は一度に 1 人しかいないため、すべての行に「President」というラベルを付けると、タイムラインは最初のグラフの 3 行を 1 つの行にまとめて、すっきりと表示します。この動作は、groupByRowLabel オプションで制御できます。

デフォルトの動作は次のとおりです。

次に、groupByRowLabel を false に設定して、1 行を 3 つに分割します。

グループ化をオフにするコードは次のとおりです。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

色の制御

Google チャートでは、デザインと読みやすさ（視覚障がいのあるユーザーを含む）に最適化された色がデフォルトで選択されます。colorByRowLabel、singleColor、backgroundColor、colors オプションを使用して、デフォルトの動作を調整できます。

colorByRowLabel オプションを使用すると、同じ行のすべてのバーが同じ色で表示されます。これは、棒の間にギャップがある場合に適しています。

colorByRowLabel はデフォルトで false に設定されているため、ここではこれをオーバーライドして true に設定します。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

表示している行に関係なくすべてのバーを同じ色にする場合は、singleColor オプションを使用します。

以下のコードでは、singleColor が 16 進値に設定されており、すべてのバーが緑色で点灯しています。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

行の背景色は、backgroundColor オプションを使用して制御できます。

backgroundColor は 16 進値として指定します。ここでは、これを colorByRowLabel と組み合わせて、会議でのトラックを表示します。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

次に、背景色を行インデックスで交互または非交互にするには、alternatingRowStyle オプションを使用します（アクティブな v51 以降）。

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

個々のバーの色を制御するには、colors オプションを使用します。

colors は 16 進数値の配列を受け取り、次の順序でバーに適用されます。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

リストされている色よりも多くの色がグラフに必要な場合、グラフは singleColor がリストの最初の色に設定されているかのように動作します。（これは、タイムラインだけでなく、すべての Google グラフに当てはまります）。

個々のバーの色を制御するもう 1 つの方法は、スタイルロールで列を使用することです。

スタイル列を追加して入力するためのコード:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

フォントの変更

rowLabelStyle を使用して各行のラベルの書体とフォントを選択し、barLabelStyle を使用して各バーのラベルの書体とフォントを選択できます。その両方について、以下で説明します。

注: ユーザーのブラウザでレンダリングできる書体を選択してください。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

barLabel テキストの色は設定できません。

グリッド線が重なって表示される

Google グラフでは、タイムラインのグリッド線が見えにくくなるのを防ぐため、棒の端点にわずかな調整を加えています。この動作を回避するには、avoidOverlappingGridLines オプションを false に設定します。

その効果を説明するために、2 つの例を示します。1 つ目はグリッド線が重なり合った例、2 つ目は重なっていません。

グリッド線に重なるコードを次に示します。

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

ツールチップのカスタマイズ

5 列のデータテーブルにツールチップの列を追加することで、タイムラインのバーにカーソルを合わせたときに表示される内容をカスタマイズできます。デフォルト以外のツールチップを表示するには、データテーブルのすべての行に 5 つの列（行ラベル、バーラベル、ツールチップ、開始、終了）がすべて含まれている必要があります。

バーにカーソルを合わせると、3 列目に定義されているテキストを含むツールチップが表示されます。このグラフでは、2 番目の列をダミー値（ここでは null）に設定して、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':['timeline']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

読み込んでいます

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

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

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

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

データ形式

行: 表の各行はタイムライン バーを表します。

Columns:

  列 0 列 1 列 2 列 3 列 4
目的: 行ラベル バーラベル（省略可） ツールチップ（省略可） 開始 終了
データ型: string string string 数値または日付 数値または日付
ロール: データ データ ツールチップ データ データ

 

構成オプション

名前
alternatingRowStyle

行インデックスに基づいてグラフの背景色を交互に行うかどうか（たとえば、偶数番号の行の背景色を暗くするなど）。false の場合、グラフの背景は均一な色になります。true の場合、グラフの背景の色合いが行インデックスごとに変わります。（注: アクティブな v51 以降）

型: boolean
デフォルト: true
avoidOverlappingGridLines

表示要素（タイムラインのバーなど）によってグリッド線を隠すかどうかを指定します。false の場合、グリッド線がディスプレイ要素によって完全に覆われることがあります。true の場合、グリッド線を表示したままにするように表示要素を変更できます。

型: boolean
デフォルト: true
backgroundColor

グラフのメイン領域の背景色。単純な HTML カラー文字列（'red'、'#00cc00' など）か、次のプロパティを持つオブジェクトを指定できます。

タイプ: 文字列またはオブジェクト
デフォルト: 「white」
色

グラフの要素に使用する色。文字列の配列。各要素は HTML カラー文字列です（例: colors:['red','#004411']）。

型: 文字列の配列
デフォルト: デフォルトの色
enableInteractivity

グラフがユーザーベースのイベントをスローするか、ユーザー操作に反応するかを示します。false の場合、グラフは「select」などのインタラクション ベースのイベントをスローしません（ただし、Ready イベントや error イベントはスローされます）。また、ホバーテキストを表示したり、ユーザー入力に応じて変化したりしません。

型: boolean
デフォルト: true
fontName

グラフのすべてのテキストに使用されるデフォルトのフォントです。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。

型: string
デフォルト: 「Arial」
fontSize

グラフ内のすべてのテキストのデフォルトのフォントサイズ（ピクセル単位）。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。

タイプ: 数値
デフォルト: 自動
forceIFrame

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

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

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

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

バーラベルのテキスト スタイルを指定するオブジェクト。形式は次のとおりです。

{fontName: <string>, fontSize: <string>}

この表の fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: null
timeline.colorByRowLabel

true に設定すると、その行のすべての棒が同じ色で表示されます。デフォルトでは、バーラベルごとに 1 色が使用されます。

型: boolean
デフォルト: false
timeline.groupByRowLabel

false に設定すると、dataTable エントリごとに 1 行が作成されます。デフォルトでは、同じ行ラベルを持つバーが 1 つの行に集約されます。

型: boolean
デフォルト: true
timeline.rowLabelStyle

行ラベルのテキスト スタイルを指定するオブジェクト。形式は次のとおりです。

{color: <string>, fontName: <string>, fontSize: <string>}

color には、'red' や '#00cc00' など、任意の HTML カラー文字列を指定できます。この表の fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: null
timeline.showBarLabels

false に設定すると、バーラベルが省略されます。デフォルトでは表示されます。

型: boolean
デフォルト: true
timeline.showRowLabels

false に設定すると、行ラベルが省略されます。デフォルトでは表示されます。

型: boolean
デフォルト: true
timeline.singleColor

棒がすべて同じ色で表示されます。16 進数値で指定します（例:「#8d8」など）。

型: string
デフォルト: null
tooltip.isHtml

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

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

型: boolean
デフォルト: true
tooltip.trigger

ツールチップを表示するユーザー操作:

  • 「フォーカス」 - ユーザーが要素にカーソルを合わせると、ツールチップが表示されます。
  • 「none」: ツールチップは表示されません。
型: string
デフォルト: 「focus」
幅

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

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: none
clearChart()

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

戻り値の型: none
getSelection()

選択したグラフ エンティティの配列を返します。 選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。 Extended description 。

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

イベント

名前
error

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

プロパティ: id、message
onmouseover

ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に関連付けられます（列インデックスが null）。

プロパティ: row、column
onmouseout

ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に関連付けられます（列インデックスが null）。

プロパティ: row、column
ready

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

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

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

Properties（プロパティ）: なし

データポリシー

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