可視化: 折れ線グラフ（画像）

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

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

概要

Google Charts API を使用して画像としてレンダリングされる折れ線グラフ。

例

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

読み込んでいます

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

  google.charts.load('current', {packages: ['imagelinechart']});

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

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

データ形式

最初の列は文字列で、カテゴリラベルを含めます。 後続の列はいくつでもかまいませんが、すべて数値にする必要があります。各列は別々の行として表示されます。

構成オプション

名前 タイプ デフォルト 説明
backgroundColor string '#FFFFFF'（白） グラフの背景色（Chart API カラー形式）。
色 配列<文字列> 自動車 各データ系列に固有の色を割り当てるために使用します。色は、Chart API のカラー形式で指定します。色 i はデータ列 i に使用され、データ列が色数より多い場合は先頭に戻ります。すべてのシリーズで単一色のバリエーションが許容される場合は、代わりに color オプションを使用します。
enableEvents boolean false クリックやマウスオーバーなど、ユーザー トリガー イベントがグラフからスローされます。 特定のグラフの種類でのみサポートされています。下記のイベントをご覧ください。
身長 数値 コンテナの高さ グラフの高さ（ピクセル単位）。
凡例 string '右' 凡例の位置とタイプ。次のいずれかです
  • 「right」 - グラフの右側
  • 「left」 - グラフの左側。
  • 「top」 - グラフの上部。
  • 「Bottom」 - グラフの下。
  • 「none」 - 凡例は表示されません。
max 数値 自動 Y 軸に表示する最大値。
分 数値 自動 Y 軸に表示する最小値。
showAxisLines boolean true false に設定すると、軸線とラベルが削除されます。
showCategoryLabels boolean showAxisLines と同じ false に設定すると、カテゴリのラベル（X 軸のラベル）が削除されます。
showValueLabels boolean showAxisLines と同じ false に設定すると、値のラベル（Y 軸のラベル）が削除されます。
title string タイトルなし グラフの上部に表示するテキストです。
valueLabelsInterval 数値 自動車 値の軸ラベルを表示する間隔。たとえば、min が 0、max が 100、valueLabelsInterval が 20 の場合、グラフでは（0、20、40、60、80 100）の軸ラベルが表示されます。
幅 数値 コンテナの幅 グラフの幅（ピクセル単位）。

メソッド

メソッド 戻り値の型 説明
draw(data, options) none グラフを描画します。

イベント

登録すると、汎用イメージチャートのページで説明されているイベントを音声で聞くことができます。

データポリシー

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