可視化: スパークライン（画像）

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

  1. Overview
  2. 例
  3. 読み込んでいます
  4. データ形式
  5. 構成オプション
  6. メソッド
  7. イベント
  8. データポリシー

概要

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 つのスパークラインとして表示されます。

構成オプション

名前 タイプ デフォルト 説明
color string すべてのグラフで使用する色を指定します。 #rrggbb 形式の文字列。例: 「#00cc00」。colors オプションが指定されていない場合にのみ使用されます。
色 文字列の配列 デフォルトの色 データ列に使用する色です。 各要素が #rrggbb 形式の文字列である文字列の配列。 例: 「#00cc00」。データ列 i には色 i が使用されます。 色の数が列の数より少ない場合、色の選択はラップ アラウンドされます。
fill boolean false true の場合、線の下の領域がカラーで塗りつぶされます。
身長 数値 コンテナの高さ 画像の高さ（ピクセル単位）。
labelPosition string none ラベルの位置。サポートされている値は、「none」、「left」、「right」です。
max 数値の配列 各スパークラインの最大データ値 各スパークラインのデータ値範囲の最大値。配列のインデックスは、DataTable の列インデックスと一致する必要があります。すべての値が null の場合、これは系列の最大値です。
分 数値の配列 各スパークラインの最小データ値 各スパークラインのデータ値範囲の最小値。配列のインデックスは、DataTable の列インデックスと一致する必要があります。すべての値が null の場合、これは系列の最小値になります。
showAxisLines boolean true true の場合、軸線が表示されます。false の場合は一致せず、showValueLabels のデフォルトは false です。
showValueLabels boolean showAxisLines が false の場合を除き true を返します。 true の場合、値の軸ラベルが表示されます。
title 文字列の配列 タイトルが表示されない 各スパークラインに使用するタイトル。
幅 数値 コンテナの幅 グラフの幅（ピクセル単位）。
layout string 「v」 垂直または水平のレイアウト: 垂直の場合は「v」、水平の場合は「h」。

メソッド

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

イベント

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

データポリシー

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