可視化: スパークライン(画像)

重要: Google グラフツールの画像グラフ部分は、2012 年 4 月 20 日をもって正式に非推奨になりました。サポート終了ポリシーに従って、引き続き機能します。

概要

Google Charts API を使用して、画像とともにレンダリングされる 1 つまたは複数のスパークラインです。画像は HTML テーブルに格納されます。

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

読み込み中

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

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

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

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

データ形式

任意の列数。すべての列は数字にする必要があります。 各列は 1 つのスパークラインとして表示されます。

設定オプション

名前 タイプ Default 説明
文字列 すべてのグラフに使用する色を指定します。 #rrggbb という形式の文字列です。例: 「#00cc00」。colors オプションが指定されていない場合にのみ使用されます。
文字列の配列 デフォルトの色 データ列に使用する色。 各要素が #rrggbb 形式の文字列である文字列の配列。 例: 「#00cc00」。色 i はデータ列 i に使用されます。 色の数が列の数よりも少ない場合、色の選択がラップされます。
fill boolean false true の場合、線の下の領域を色で塗りつぶします。
高さ 数値 コンテナの高さ 画像の高さ(ピクセル単位)。
labelPosition 文字列 none ラベルの位置。指定できる値は「none」、「left」、「right」です。
最高 数値の配列 各スパークラインの最大データ値 各スパークラインのデータ値の範囲の最大値。配列内のインデックスは、DataTable の列インデックスと一致する必要があります。すべての値が null の場合は、これが系列の最大値になります。
数値の配列 各スパークラインの最小データ値 各スパークラインのデータ値の範囲の最小値。配列内のインデックスは、DataTable の列インデックスと一致する必要があります。すべての値が null の場合は、系列の最小値になります。
表示 AxisLine boolean true true の場合、軸線が表示されます。false の場合、そうではありません。showValueLabels のデフォルトは false です。
ShowValueLabels boolean true(showAxisLines が false の場合を除く)。 true の場合、値軸のラベルが表示されます。
title 文字列の配列 タイトルは表示されません 各スパークラインに使用するタイトル。
width 数値 コンテナの幅 グラフの幅(ピクセル単位)です。
layout 文字列 「V」 縦向きまたは横向きのレイアウト: 縦向きの場合は「v」、横向きの場合は「h」です。

メソッド

メソッド 戻り値の型 説明
draw(data, options) none グラフを描画します。
getSelection() 選択要素の配列 選択したグラフのインデックスをオブジェクトの配列として返します。各オブジェクトには、選択したスパークラインの列番号を含む列プロパティがあります。複数の選択した列を返すことができます。
setSelection(selection) none 指定されたスパークラインを選択し、指定されていないスパークラインの選択を解除します。select は、選択したスパークラインのインデックスである、数値 column プロパティを持つオブジェクトの配列です。詳細については、setSelection() をご覧ください。

イベント

名前 説明 プロパティ
select 標準の選択イベント。 なし

データポリシー

Chart API のロギング ポリシーをご参照ください。