タイムライン

  1. 概要
  2. 簡単な例
  3. バーにラベルを付ける
  4. 高度な例
  5. 1 行にバーを配置する
  6. フォントの変更
  7. 色の管理
  8. グリッド線の重複
  9. ツールチップのカスタマイズ
  10. 読み込み中
  11. データ形式
  12. 構成オプション
  13. Methods
  14. イベント
  15. データポリシー

概要

タイムラインは、一連のリソースの使用状況を時系列で表示するグラフです。ソフトウェア プロジェクトを管理していて、誰がいつ何をするかを知りたい場合や、会議を開催して会議室のスケジュールを設定する必要がある場合に、可視化が適している選択肢になります。一般的なタイムライン タイプの 1 つがガントチャートです。

注: JavaScript の日付オブジェクトでは、月は 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 Chart のタイムラインはカスタマイズ可能です。以下の例では、タイムラインの外観をカスタマイズする一般的な方法をいくつか紹介します。

バーにラベルを付ける

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

このコードでは、棒のラベル（各大統領のフルネーム）を保持する新しい列をデータに挿入しています。タイムラインに 4 つの列がある場合、dataTable1 つ目は行ラベル、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 人しかいないため、すべての行を「大統領」としてラベルを付けると、わかりやすくするために、最初のグラフの 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>

色を制御する

デフォルトでは、外観と読みやすさ（視覚障がいのあるユーザーを含む）向けに最適化された色が選択されます。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 グラフに当てはまります）。

個々の棒の色を制御するもう一つの方法は、スタイルの役割がある列を使用することです。

スタイル列を追加して設定するコードは次のとおりです。

<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 Charts では、タイムラインのグリッド線が目立たないように、棒のエンドポイントを微調整しています。この動作を回避するには、avoidOverlappingGridLines オプションを false に設定します。

効果を説明するため、2 つの例を示します。1 つ目は格子状の線で、もう 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('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
使用目的: 行ラベル バーのラベル（省略可） ツールチップ（省略可） 開始 終了
データの種類: 文字列 文字列 文字列 数値または日付 数値または日付
ロール: サポート サポート ツールチップ サポート サポート

 

設定オプション

名前
交互の行スタイル

グラフのインデックスを、行インデックスごとに入れ替えるかどうか（インデックスが一致した行が濃い色合いの背景色になるかどうか）。false の場合、グラフの背景は統一された色になります。true の場合、グラフの背景は行インデックスごとに色合いが変わります。（注: アクティブな v51 以降）

型: boolean
デフォルト: true
beyondOverpingGridLines

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

型: boolean
デフォルト: true
backgroundColor

グラフのメイン領域の背景色。単純な HTML カラー文字列、たとえば 'red' や '#00cc00'、または以下のプロパティを持つオブジェクトのいずれかです。

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

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

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

グラフでユーザーベースのイベントがスローされるか、ユーザー操作に反応するか。false の場合、グラフは「select」やその他の操作ベースのイベント（準備完了イベントやエラーイベントをスローしません）をスローせず、ユーザー入力に応じてホバーテキストを表示するなど、変化しません。

型: boolean
デフォルト: true
フォント名

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

型: boolean
デフォルト: true
タイムライン.showRowLabels

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

型: boolean
デフォルト: true
タイムライン.singleColor

すべてのバーを同じ色で表示します。16 進数値（例:「#8d8」など）。

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

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

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

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

ツールチップが表示されるユーザー操作:

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

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

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: なし
clearChart()

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

戻り値の型: なし
getSelection()

選択したグラフ エンティティの配列を返します。選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

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

イベント

名前
error

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

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

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

プロパティ: 行、列
onmouseout

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

プロパティ: 行、列
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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