視覚化: 散布図

概要

散布図では、グラフに点がプロットされます。ユーザーがポイントにカーソルを合わせると、ツールチップに詳細情報が表示されます。

Google 散布図は、ブラウザの機能に応じて SVG または VML を使用して、ブラウザ内でレンダリングされます。

例

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

シェイプの変更とアニメーション化

デフォルトでは、散布図はデータセットの要素を円で表したものです。pointShape ポイント オプションを使用して他のシェイプを指定することもできます。詳細については、ポイントのカスタマイズのドキュメントをご覧ください。

他のほとんどの Google グラフと同様に、イベントを使用してアニメーション化できます。最初の ready イベントのイベント リスナーを追加して、必要な変更を行った後にグラフを再描画できます。最初の ready イベントの後は、animationfinish イベントをリッスンしてプロセスを繰り返すことで、連続したアニメーションを作成できます。animation オプションでは、再描画の方法（即時（アニメーションなし）または滑らかさ）と、スムーズでどのような動作であればどの動作の動作かを制御します。

良いパーツ
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
完全な 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:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

マテリアルの散布図を作成する

2014 年に、Google は Google プラットフォームで実行されるプロパティとアプリ（Android アプリなど）で共通のデザインをサポートすることを目的としたガイドラインを発表しました。Google ではこの取り組みをマテリアル デザインと呼んでいます。Google はすべてのコアチャートの「Material」バージョンを提供します。外観が気に入った場合は自由に使用できます。

マテリアル散布図の作成は、「クラシック」散布図と呼ばれるものの作成と似ています。Google Visualization API を読み込み（'corechart' パッケージではなく 'scatter' パッケージを使用します）、datatable を定義してから、オブジェクトを作成します（ただし、google.visualization.ScatterChart クラスではなく google.charts.Scatter クラスです）。

注: 旧バージョンの Internet Explorer ではマテリアル チャートは動作しません。（IE8 以前のバージョンは Material Chart に必要な SVG をサポートしていません）。

マテリアル散布図は、従来の散布図に比べて多くの点が改善されています。たとえば、重なり合うポイントの可視性の可変性、カラーパレットの改善、ラベルの書式の改善、デフォルトの間隔の厳格化、グリッドラインやタイトルのソフト化（字幕の追加）などです。

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

マテリアル チャートはベータ版です。外観とインタラクティビティはほぼ最終的なものですが、従来のグラフで使用できるオプションの多くはまだ利用できません。この問題では、まだサポートされていないオプションのリストを確認できます。

また、オプションが宣言する方法は最終版ではないため、次のオプションのいずれかを使用してクラシック オプションを使用している場合は、マテリアル オプションに変換する必要があります。

chart.draw(data, options);

...以下に置き換えます。

chart.draw(data, google.charts.Scatter.convertOptions(options));

デュアル Y グラフ

散布図で 2 つの系列を表示したい場合は、2 つの独立した Y 軸、つまり 1 つの系列の左軸と 2 つの系列で右の軸を作成することができます。

2 つの y 軸には異なる指標（「最終試験グレード」と「学習時間」）が異なるだけでなく、それぞれ独立したスケールとグリッド線があります。この動作をカスタマイズする場合は、vAxis.gridlines オプションを使用します。

以下のコードでは、axes オプションと series オプションを一緒に使用すると、グラフの デュアル Y の外観を指定できます。series オプションは、各軸に使用する軸を指定します（'final grade' と 'hours studied'）。データテーブルの列名と関係する必要はありません。axes オプションは、このグラフをデュアル Y グラフにして、'Final Exam Grade' 軸を左側、'Hours Studied' 軸を右側に配置します。

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

上位 X グラフ

注: 上位 X 軸はマテリアル グラフ（パッケージ scatter を含む）でのみ使用できます。

X 軸のラベルとタイトルをグラフの下ではなく上に配置する場合は、マテリアル グラフで axes.x オプションを使用します。

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

読み込み中

google.charts.load パッケージ名は "corechart"、可視化のクラス名は google.visualization.ScatterChart です。

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

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

マテリアル散布図の場合、google.charts.load パッケージ名は "scatter"、可視化のクラス名は google.charts.Scatter です。

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

  var visualization = new google.charts.Scatter(container);

データ形式

行: テーブルの各行は、同じ x 軸値を持つデータポイントのセットを表します。

Columns:

  列 0 列 1 … N 列
使用目的: データポイント X の値 シリーズ 1 Y の値 … 系列 N Y の値
データの種類: 文字列、数値、または日付/日時/時刻 文字列、数値、または日付/日時/時刻 … 文字列、数値、または日付/日時/時刻
ロール: サポート サポート … サポート
オプションの列のロール:

なし

 …

複数の系列を指定するには、Y 軸を 2 つ以上指定し、Y の列のみに Y 値を指定します。

X 値 シリーズ 1 Y の値 系列 2 の Y の値
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

設定オプション

名前
aggregateTarget
複数のデータの選択がツールチップにどのように統合されるか:
  • 'category': 選択したデータを x 値別にグループ化します。
  • 'series': 選択したデータを時系列でグループ化します。
  • 'auto': 選択したデータを同じ x 値を持つ場合は x 値でグループ化し、それ以外の場合は系列でグループ化します。
  • 'none': 選択項目ごとに 1 つのツールチップのみを表示します。
aggregationTarget は多くの場合、selectionMode や tooltip.trigger と組み合わせて使用されます。以下に例を示します。
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
型: string
デフォルト: 「auto」
Animation.duration

アニメーションの長さ（ミリ秒単位）。詳細については、アニメーションのドキュメントをご覧ください。

タイプ: 数値
デフォルト: 0
image.easing

アニメーションに適用するイージング関数。以下のオプションを使用できます。

  • 「linear」- 固定の速度。
  • 'in' - イーズイン - ゆっくりと始めて速く。
  • 「out」- イーズアウト - 速く、ゆっくりと。
  • 「inAndOut」 - イーズインとイーズアウト - 最初はゆっくりとスピードを上げ、その後遅くします。
型: string
デフォルト: 「リニア」
Animation.startup

初回描画時にグラフをアニメーション化するかどうかを指定します。true の場合、グラフはベースラインから開始して、最終状態にアニメーション化します。

型: boolean
デフォルト: false
annotation.boxStyle

アノテーションをサポートするグラフの場合、annotations.boxStyle オブジェクトによってアノテーションを囲むボックスの外観が制御されます。

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

このオプションは現在、面グラフ、棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。アノテーション グラフではサポートされていません。

タイプ: オブジェクト
デフォルト: null
annotation.datum
アノテーションをサポートするグラフの場合、annotations.datum オブジェクトを使用すると、個々のデータ要素に提供されるアノテーション（棒グラフの各棒で表示される値など）について、Google グラフの選択をオーバーライドできます。色は annotations.datum.stem.color、ステムの長さは annotations.datum.stem.length、スタイルは annotations.datum.style で制御できます。
タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 12、スタイルは「ポイント」。
annotation.domain
アノテーションをサポートするグラフの場合、annotations.domain オブジェクトを使用すると、ドメインに提供されるアノテーション（グラフの長軸、一般的な折れ線グラフの X 軸など）について、Google チャートの選択をオーバーライドできます。色は annotations.domain.stem.color、ステムの長さは annotations.domain.stem.length、スタイルは annotations.domain.style で制御できます。
タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 5、スタイルは「ポイント」。
annotation.highContrast
アノテーションをサポートするグラフの場合、annotations.highContrast ブール値を使用して、Google チャートのアノテーション色の選択をオーバーライドできます。デフォルトでは、annotations.highContrast は true です。グラフはコントラストの強いアノテーション カラー（暗い背景には明るい色、明るい色には暗い色）を選択します。annotations.highContrast を false に設定していて、独自のアノテーション色を指定しない場合、Google チャートではアノテーションにデフォルトの系列色が使用されます。
型: boolean
デフォルト: true
annotation.stem
アノテーションをサポートするグラフの場合、annotations.stem オブジェクトを使用すると、ステム スタイルに関する Google グラフの選択をオーバーライドできます。色は annotations.stem.color、ステムの長さは annotations.stem.length で制御できます。ステム長のオプションは、スタイルが 'line' のアノテーションには影響を与えません。'line' データム アノテーションの場合、ステム長は常にテキストと同じであり、'line' ドメイン アノテーションの場合はステムがグラフ全体に拡張されています。
タイプ: オブジェクト
デフォルト: 色は「黒」。長さは、ドメイン アノテーションの場合は 5、データム アノテーションの場合は 12 です。
annotation.style
アノテーションをサポートするグラフの場合、annotations.style オプションを使用すると、Google チャートのアノテーション タイプの選択をオーバーライドできます。'line' または 'point' のいずれかです。
型: string
デフォルト: 'point'
annotation.textStyle
アノテーションをサポートするグラフの場合、annotations.textStyle オブジェクトによってアノテーションのテキストの外観が制御されます。
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

このオプションは現在、面グラフ、棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。 アノテーション グラフではサポートされていません。

タイプ: オブジェクト
デフォルト: null
軸タイトルの位置

軸のタイトルを配置する場所（グラフ領域との比較）サポートされている値:

  • in - グラフ領域内に軸のタイトルを描画します。
  • out - 軸領域をグラフ領域の外側に描画します。
  • none - 軸のタイトルを省略します。
型: string
デフォルト: 'out'
backgroundColor

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

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

グラフの枠線の色（HTML の色文字列）。

型: string
デフォルト: '#666'
backgroundColor.strokeWidth

枠線の幅（ピクセル単位）。

タイプ: 数値
デフォルト: 0
backgroundColor.fill

グラフの塗りつぶしの色。HTML の色文字列で指定します。

型: string
デフォルト: '白'
Chart.title

マテリアル グラフの場合、このオプションでタイトルを指定します。

型: string
デフォルト: null
Chart.subtitle

マテリアル チャートの場合、このオプションで字幕を指定します。字幕はマテリアル チャートでのみサポートされています。

型: string
デフォルト: null
グラフ領域

メンバーがグラフ領域の配置とサイズを設定するためのオブジェクト（グラフ自体が描画される軸と凡例を除く）。数字と、それに続く % の 2 つの形式がサポートされています。単純な数値はピクセル単位で表される値であり、数値の後に % が続く率がパーセンテージです。例: chartArea:{left:20,top:0,width:'50%',height:'75%'}

タイプ: オブジェクト
デフォルト: null
ChartArea.backgroundColor
グラフ領域の背景色。文字列を使用する場合、16 進文字列（例:「#fdc」）または英語の色名で指定してください。オブジェクトを使用する場合、以下のプロパティを指定できます。
  • stroke: 色。16 進数文字列または英語の色名で指定します。
  • strokeWidth: 指定する場合、指定された幅（stroke の色）のグラフ領域を囲む枠線を描画します。
タイプ: 文字列またはオブジェクト
デフォルト: '白'
ChartArea.left

グラフの左枠線からの距離。

タイプ: 数値または文字列
デフォルト: 自動
ChartArea.top

グラフの上枠線からの距離。

タイプ: 数値または文字列
デフォルト: 自動
ChartArea.width

グラフの領域の幅。

タイプ: 数値または文字列
デフォルト: 自動
ChartArea.height

グラフの領域の高さ。

タイプ: 数値または文字列
デフォルト: 自動
色

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

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

グラフの crosshair プロパティを含むオブジェクト。

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

色名（例:"blue" など）または RGB 値（例:「#adf」）。

型: string
タイプ: デフォルト
集中力アップ

フォーカスしたクロスヘア プロパティを含むオブジェクト。
例: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

タイプ: オブジェクト
デフォルト: デフォルト
crosshair.opacity

クロスヘアの不透明度（0.0 では完全に透明、1.0 では完全に不透明）。

タイプ: 数値
デフォルト: 1.0
crosshair.orientation

クロスヘアの向き。縦向きのヘアの場合は「カテゴリ」、水平ヘアの場合のみ「水平」、従来のクロスヘアの場合は「両方」にできます。

型: string
デフォルト: '両方'
クロスヘア。選択中

選択時のクロスヘア プロパティを含むオブジェクト。
例: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

タイプ: オブジェクト
デフォルト: デフォルト
crosshair.trigger

照準を表示するタイミング: 'focus'、'selection'、または 'both'。

型: string
デフォルト: '両方'
curveType

線の幅がゼロでない場合の線の曲線を制御します。 次のいずれか 1 つを指定できます。

  • 「none」 - 曲線のない直線。
  • 'function' - 線の角度は滑らかになります。
タイプ: 文字列
デフォルト: 「none」
データの不透明度

データポイントの透明性。1.0 は不透明、0.0 は完全に透明です。散布図、ヒストグラム、棒グラフ、縦棒グラフでは、表示可能なデータ（散布図のドットとその他の長方形）を参照します。折れ線グラフや面グラフのように、データを選択してドットが作成されるグラフでは、カーソルを合わせたときや選択したときに円が表示されます。複合グラフは両方の動作を示しますが、このオプションは他のグラフには影響しません。（トレンドラインの不透明度を変更するには、トレンドラインの不透明度をご覧ください）。

タイプ: 数値
デフォルト: 1.0
enableInteractivity

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

型: boolean
デフォルト: true
explorer

explorer オプションを使用すると、Google グラフをパンしたりズームしたりできます。 explorer: {} はデフォルトのエクスプローラ動作です。ユーザーはドラッグすることで水平および垂直方向にパンし、スクロールしてズームインおよびズームアウトできます。

この機能は試験運用版であり、今後のリリースで変更される可能性があります。

注: エクスプローラは、連続軸（数値や日付など）でのみ機能します。

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

Google グラフ エクスプローラでは、次の 3 つのアクションがサポートされています。

  • dragToPan: ドラッグすると、グラフを水平方向と垂直方向にパンできます。横軸のみパンするには、explorer: { axis: 'horizontal' } を使用します。 同様に、縦軸も同様です。
  • dragToZoom: エクスプローラのデフォルトの動作は、ユーザーがスクロールしたときの拡大と縮小です。explorer: { actions: ['dragToZoom', 'rightClickToReset'] } を使用している場合は、長方形の領域をドラッグするとその領域にズームインします。dragToZoom を使用する場合は必ず rightClickToReset を使用することをおすすめします。ズームのカスタマイズについては、explorer.maxZoomIn、explorer.maxZoomOut、explorer.zoomDelta をご覧ください。
  • rightClickToReset: グラフを右クリックして、元のパンとズームレベルに戻ります。
型: 文字列の配列
デフォルト: [dragToPan」、「rightClickToReset]
explorer.軸

explorer オプションを使用すると、デフォルトでは水平方向と垂直方向にパンできます。ユーザーが水平方向にしかパンしない場合は、explorer: { axis: 'horizontal' } を使用します。同様に、explorer: { axis: 'vertical' } は垂直方向のみのパンを有効にします。

型: string
デフォルト: 水平パンと垂直パンの両方
explorer.keepInBounds

デフォルトでは、データの場所に関係なく、ユーザーはすべての画面を移動できます。元のグラフの外には移動しないよう、explorer: { keepInBounds: true } を使用します。

型: boolean
デフォルト: false
explorer.maxZoomIn

エクスプローラでズームインできる最大値です。デフォルトでは、ユーザーは元のビューの 25% しか表示されないような大きさにズームインできます。explorer: { maxZoomIn: .5 } を設定すると、ユーザーは元のビューの半分を表示するだけまでズームインできます。

タイプ: 数値
デフォルト: 0.25
explorer.maxZoomOut

エクスプローラでズームアウトできる最大値です。デフォルトでは、使用可能なスペースの 1/4 しかグラフで使用されないほどズームアウト可能です。explorer: { maxZoomOut: 8 } を設定すると、チャートが使用可能なスペースの 1/8 しか占めなくなるほど、ユーザーはかなりズームアウトできるようになります。

タイプ: 数値
デフォルト: 4
explorer.zoomDelta

ユーザーがズームインまたはズームアウトすると、explorer.zoomDelta によって拡大される距離が決まります。数字が小さいほど、滑らかでズームが遅くなります。

タイプ: 数値
デフォルト: 1.5
fontSize

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

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

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

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

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

型: boolean
デフォルト: false
軸

メンバーがさまざまな横軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
タイプ: オブジェクト
デフォルト: null
hAxis.baseline

横軸のベースライン。

タイプ: 数値
デフォルト: 自動
hAxis.baselineColor

横軸のベースラインの色。任意の HTML 色文字列（例: 'red'、'#00cc00'）を指定できます。

タイプ: 数値
デフォルト: 'black'
hAxis.direction

横軸の値の増加方向。値の順序を逆にするには、-1 を指定します。

タイプ: 1 または -1
デフォルト: 1
hAxis.format

数値軸ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば {format:'#,###%'} は、値が 10、7.5、0.5 の場合は「1,000%」、「750%」、「50%」と表示されます。次のいずれかを指定することもできます。

  • {format: 'none'}: 数値を書式設定せずに表示します（8000000）
  • {format: 'decimal'}: 数値を千桁の区切りで表示します（例:8,000,000）
  • {format: 'scientific'}: 数値を科学的表記で表示します（8e6）
  • {format: 'currency'}: 現地通貨での数値を表示します（例:8,000,000.00 ドル）
  • {format: 'percent'}: 数値をパーセンテージで表示します（800,000,000%）
  • {format: 'short'}: 短縮番号を表示します（例:800 万）
  • {format: 'long'}: 数値を完全な単語として表示します（800 万）

ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。

ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は format:"#" を指定しますが、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

型: string
デフォルト: 自動
hAxis.gridlines

横軸のグリッド線を構成するプロパティを持つオブジェクト。 横軸のグリッド線は縦に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 

{color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
hAxis.gridlines.color

グラフ領域内の水平グリッド線の色有効な HTML 色の文字列を指定します。

型: string
デフォルト: '#CCC'
hAxis.gridlines.count

グラフ領域内の水平グリッド線のおおよその数。 gridlines.count に正の数を指定すると、グリッド間の minSpacing の計算に使用されます。1 つのグリッド線だけを描画する場合は 1、グリッドを描画しない場合は 0 の値を指定します。デフォルトの -1 を指定すると、他のオプションに基づいてグリッド線の数が自動的に計算されます。

タイプ: 数値
デフォルト: -1
hAxis.gridlines.units

グラフで計算されたグリッド線を使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳細については、日付と時刻をご覧ください。

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

横軸にマイナー グリッドラインを構成するメンバーを含むオブジェクト（hAxis.gridlines オプションと同様）。

タイプ: オブジェクト
デフォルト: null
hAxis.minorGridlines.color

グラフ領域の横並びのマイナー グリッド線の色。有効な HTML 色の文字列を指定します。

型: string
デフォルト: グリッド線と背景色のブレンド
hAxis.minorGridlines.count

minorGridlines.count オプションは、カウントを 0 に設定してマイナー グリッドラインを無効にすることを除き、ほとんどを非推奨にしています。マイナー グリッド線の数は、主要グリッド線（hAxis.gridlines.interval を参照）と必要な最小スペース（hAxis.minorGridlines.minSpacing を参照）の間隔によって変わります。

タイプ: 数値
デフォルト: 1
hAxis.minorGridlines.units

グラフの計算のマイナー グリッドラインで使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳細については、日付と時刻をご覧ください。

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

hAxis プロパティ。横軸を対数スケールにします（すべての値が正の値である必要があります）。はいの場合は true に設定します。

型: boolean
デフォルト: false
hAxis.scaleType

hAxis プロパティ。横軸を対数スケールにする。次のいずれか 1 つを指定できます。

  • null - 対数目盛は実行されません。
  • 'log' - 対数目盛。負の値とゼロの値はプロットされません。このオプションは、hAxis: { logscale: true } を設定する場合と同じです。
  • 'mirrorLog' - 負の値をゼロにプロットする対数スケーリング。プロットされた負の数値は、絶対値の対数の負数です。0 に近い値は線形スケールでプロットされます。
型: string
デフォルト: null
hAxis.textPosition

グラフの領域に対する水平軸のテキストの位置。サポートされている値: out、in、none。

型: string
デフォルト: 'out'
hAxis.textStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

自動生成された X 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値（数値、日付、日時、時刻など）またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の v プロパティと、ラベルとして表示されるリテラル文字列を含むオプションの f プロパティが必要です。

オーバーライドする viewWindow.min または viewWindow.max を指定しない限り、viewWindow は自動的に最小ティックと最大ティックを含むように拡張されます。

例:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
型: 要素の配列
デフォルト: 自動
hAxis.title

hAxis プロパティは、横軸のタイトルを指定します。

型: string
デフォルト: null
hAxis.titleTextStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

横軸の最大値を指定の値に移動します。これはほとんどのグラフで右向きです。データの最大 x 値より小さい値に設定されている場合は無視されます。 hAxis.viewWindow.max はこのプロパティをオーバーライドします。

タイプ: 数値
デフォルト: 自動
hAxis.minValue

横軸の最小値を指定の値に移動します。これはほとんどのグラフで左になります。データの最小 x 値より大きい値に設定されている場合は無視されます。 hAxis.viewWindow.min はこのプロパティをオーバーライドします。

タイプ: 数値
デフォルト: 自動
hAxis.viewWindowMode

横軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。

  • 「かなり」 - 最大値と最小値がグラフ領域の左右に少しだけレンダリングされるように、水平方向の値を拡大縮小します。viewWindow は、数値が最も近いメジャー グリッド線、または日時が最も近いマイナー グリッド線に拡張されます。
  • 「maximized」 - 最大値と最小値がグラフ領域の左右に接触するように水平値を拡大縮小します。これにより、haxis.viewWindow.min と haxis.viewWindow.max は無視されます。
  • 'explicit' - グラフ領域の左と右のスケール値を指定するための、非推奨のオプション。（haxis.viewWindow.min と haxis.viewWindow.max を冗長化しているため非推奨です）。これらの値以外のデータ値はトリミングされます。表示する最大値と最小値を示す hAxis.viewWindow オブジェクトを指定する必要があります。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には haxis.viewWindow.min と haxis.viewWindow.max が優先されます。
hAxis.viewWindow

横軸の切り抜き範囲を指定します。

タイプ: オブジェクト
デフォルト: null
hAxis.viewWindow.max

レンダリングする水平方向のデータ値の上限。

hAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

タイプ: 数値
デフォルト: 自動
hAxis.viewWindow.min

レンダリングする最小水平データ値。

hAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

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

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

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

メンバーがさまざまな要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト
デフォルト: null
凡例.alignment

凡例の配置。次のいずれか 1 つを指定できます。

  • 「start」 - 凡例に割り当てられた領域の始まりと一致します。
  • 'center' - 凡例に割り当てられた領域の中心に配置されます。
  • 'end' - 凡例に割り当てられた領域の終端に合わせます。

凡例の中心の開始、中央、終了は、スタイル（垂直または水平）を基準とします。たとえば、「右」の凡例では「開始」と「終了」がそれぞれ上部と下部に存在します。「上部」の凡例の場合、「開始」と「終了」はそれぞれ領域の左側と右側になります。

デフォルト値は、凡例の位置によって異なります。「凡例」のデフォルトは、デフォルトは「センター」、その他の凡例は「開始」です。

型: string
デフォルト: 自動
凡例.maxLines

凡例の最大行数。複数の行に設定すると、凡例に行が追加されます。注: レンダリングされる実際の行数を判断するために使用される正確なロジックは、まだ可変です。

現在、このオプションは凡例.position が「top」の場合にのみ動作します。

タイプ: 数値
デフォルト: 1
凡例.pageIndex

凡例で最初に選択した 0 から始まるページ インデックス。

タイプ: 数値
デフォルト: 0
凡例.position

凡例の位置。次のいずれか 1 つを指定できます。

  • 「bottom」 - グラフの下。
  • 「left」 - グラフの左端で、左軸に系列が関連付けられていない場合。そのため、左側に凡例を配置するには、オプション targetAxisIndex: 1 を使用します。
  • 'in' - グラフの左上にあります。
  • 'none' - 凡例は表示されません。
  • 「右」- グラフの右側。vAxes オプションと互換性がありません。
  • top - グラフの上部。
型: string
デフォルト: 「right」
凡例テキストスタイル

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
LineWidth

線の幅（ピクセル単位）すべての線を隠し、点のみを表示するには、ゼロを使用します。

タイプ: 数値
デフォルト: 0
ページの向き

グラフの向き。'vertical' に設定すると、グラフの軸が回転して、たとえば縦棒グラフが棒グラフになり、面グラフが上ではなく右に成長します。

型: string
デフォルト: 'horizontal'
pointShape

個々のデータ要素の形状: 「円」、「三角形」、「正方形」、「ひし形」、「星」、「多角形」。例については、ポイントに関するドキュメントをご覧ください。

型: string
デフォルト: 「Circle」
ポイントサイズ

データポイントの直径（ピクセル単位）。すべての地点を非表示にするには、ゼロを使用します。個々の系列の値は、series プロパティを使用してオーバーライドできます。トレンドラインを使用している場合、このオプションはそれを構成するポイントの pointSize にも影響し、トレンドラインの見かけの幅が変更されます。これを回避するには、trendlines.n.pointsize オプションを使用してオーバーライドします。

タイプ: 数値
デフォルト: 7
ポイント表示

ポイントを表示するかどうかを指定します。すべてのポイントを非表示にするには、false に設定します。個々の系列の値は、series プロパティを使用してオーバーライドできます。トレンドラインを使用している場合、trendlines.n.pointsVisible オプションでオーバーライドしない限り、pointsVisible オプションはすべてのトレンドライン上のポイントの表示に影響します。

これは、"point {visible: true}" 形式のスタイルロールを使用してオーバーライドすることもできます。

型: boolean
デフォルト: true
セレクション モード

selectionMode が 'multiple' の場合、ユーザーは複数のデータポイントを選択できます。

型: string
デフォルト: 'single'
series

オブジェクトの配列。グラフ内の対応する系列の形式を記述します。系列のデフォルト値を使用するには、空のオブジェクト {} を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートします。

  • color - このシリーズで使用する色。有効な HTML 色の文字列を指定します。
  • labelInLegend - グラフの凡例に表示されるシリーズの説明。
  • lineWidth - このシリーズのグローバル lineWidth 値をオーバーライドします。
  • pointShape - このシリーズのグローバル pointShape 値をオーバーライドします。
  • pointSize - このシリーズのグローバル pointSize 値をオーバーライドします。
  • pointsVisible - このシリーズのグローバル pointsVisible 値をオーバーライドします。
  • visibleInLegend - ブール値。時系列に凡例のエントリが存在することを意味し、false は存在しないことを意味します。デフォルトは true です。

オブジェクトの配列を指定できます（配列は指定された順序で時系列に適用されます）。また、それぞれの子に、適用する時系列を示す数値キーが含まれるオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同一で、最初のシリーズは凡例で黒色で存在し、4 つ目のシリーズは凡例で赤色で存在し、存在しない場合は宣言します。

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
型: オブジェクトの配列、またはネストされたオブジェクトを含むオブジェクト
デフォルト: {}
テーマ

テーマとは、特定のグラフの動作や視覚効果を実現するために連携する一連の事前定義オプション値です。現在選択できるテーマは 1 つのみです。

  • 「maximized」 - グラフの領域を最大化し、グラフ領域内の凡例とすべてのラベルを描画します。以下のオプションを設定します。 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
型: string
デフォルト: null
title

グラフの上に表示するテキスト。

型: string
デフォルト: タイトルなし
titlePosition

グラフのタイトルを配置する場所（グラフ領域との比較）サポートされている値:

  • in - グラフ領域内にタイトルを描画します。
  • out - グラフ領域の外側にタイトルを描画します。
  • none - タイトルを省略します。
型: string
デフォルト: 'out'
titleTextStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ツールチップ

さまざまなツールチップ要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 

{textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
tooltip.ignoreBounds

true に設定すると、すべてのグラフでツールチップの描画がグラフの境界の外に流れるようにします。

注: これは HTML ツールチップにのみ適用されます。SVG ツールチップを有効にすると、グラフの境界外のオーバーフローはトリミングされます。詳しくは、ツールチップのコンテンツのカスタマイズをご覧ください。

タイプ: ブール値
デフォルト: false
tooltip.isHTML

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

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

型: boolean
デフォルト: false
tooltip.showColorCode

true の場合、ツールチップ内のシリーズ情報の横に色付きの正方形が表示されます。

型: boolean
デフォルト: false
tooltip.textStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

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

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

グラフをサポートするグラフのトレンドラインが表示されます。デフォルトでは線形トレンドラインが使用されますが、これは trendlines.n.type オプションでカスタマイズできます。

トレンドラインはシリーズごとに指定されるため、ほとんどの場合、オプションは次のようになります。

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
タイプ: オブジェクト
デフォルト: null
Trendlines.n.color

トレンドラインの色。英語の色の名前または 16 進文字列で表します。

型: string
デフォルト: デフォルトの系列の色
トレンドライン、度

type: 'polynomial' のトレンドラインの場合、多項式（2 次式の場合は 2、3 次式は 3 など）。（デフォルトの学位は、今後の Google Charts のリリースで 3 から 2 に変更される可能性があります）。

タイプ: 数値
デフォルト: 3
Trendlines.n.labelInLegend

設定すると、凡例にこの文字列としてトレンドラインが表示されます。

型: string
デフォルト: null
Trendslines.n.lineWidth

トレンドラインの線幅（ピクセル単位）。

タイプ: 数値
デフォルト: 2
Trendslines.n.opacity

トレンドラインの透明性。0.0（透過）～ 1.0（不透明）です。

タイプ: 数値
デフォルト: 1.0
Trendlines.n.pointSize

トレンドライン は、グラフ上の多数のドットをスタンプすることで構成されます。まれに必要になるこのオプションでは、ドットのサイズをカスタマイズできます。通常は、トレンドラインの lineWidth オプションが優先されます。ただし、グローバル pointSize オプションを使用していて、トレンドラインごとに異なるポイントサイズが必要な場合は、このオプションが必要です。

タイプ: 数値
デフォルト: 1
Trendslines.n.pointsVisible

トレンドライン は、グラフに多くのドットを打ち込むことで構成されます。トレンドラインの pointsVisible オプションでは、特定のトレンドラインのポイントを表示するかどうかを決定します。

型: boolean
デフォルト: true
Trendlines.n.showR2

凡例またはトレンドラインのツールチップに決定係数を表示するかどうか。

型: boolean
デフォルト: false
Trendlines.n.type

トレンドラインが 'linear'（デフォルト）、'exponential'、または 'polynomial' であるかどうか。

型: string
デフォルト: 線形
Trendlines.n.visibleInLegend

凡例に トレンドライン 式が表示されるかどうか。（トレンドラインのツールチップに表示されます）。

型: boolean
デフォルト: false
vAxis

メンバーがさまざまな垂直軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
タイプ: オブジェクト
デフォルト: null
vAxis.baseline

vAxis プロパティ: 縦軸のベースラインを指定します。ベースラインが最大のグリッド線よりも大きいか、または最小のグリッド線よりも小さい場合は、最も近いグリッド線に丸められます。

タイプ: 数値
デフォルト: 自動
vAxis.baselineColor

縦軸のベースラインの色を指定します。任意の HTML 色文字列（例: 'red'、'#00cc00'）を指定できます。

タイプ: 数値
デフォルト: 'black'
vAxis.direction

縦軸の値の増加方向。デフォルトでは、低い値はグラフの下部に表示されます。値の順序を逆にするには、-1 を指定します。

タイプ: 1 または -1
デフォルト: 1
vAxis.format

数値軸ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば {format:'#,###%'} は、値が 10、7.5、0.5 の場合は「1,000%」、「750%」、「50%」と表示されます。次のいずれかを指定することもできます。

  • {format: 'none'}: 数値を書式設定せずに表示します（8000000）
  • {format: 'decimal'}: 数値を千桁の区切りで表示します（例:8,000,000）
  • {format: 'scientific'}: 数値を科学的表記で表示します（8e6）
  • {format: 'currency'}: 現地通貨での数値を表示します（例:8,000,000.00 ドル）
  • {format: 'percent'}: 数値をパーセンテージで表示します（800,000,000%）
  • {format: 'short'}: 短縮番号を表示します（例:800 万）
  • {format: 'long'}: 数値を完全な単語として表示します（800 万）

ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。

ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は format:"#" を指定しますが、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

型: string
デフォルト: 自動
vAxis.gridlines

メンバーが縦軸にグリッド線を設定するオブジェクト。 縦軸のグリッド線は横方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 

{color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
vAxis.gridlines.color

グラフ領域内の垂直グリッド線の色有効な HTML 色の文字列を指定します。

型: string
デフォルト: '#CCC'
vAxis.gridlines.count

グラフ領域内の水平グリッド線のおおよその数。 gridlines.count に正の数を指定すると、グリッド間の minSpacing の計算に使用されます。1 つのグリッド線だけを描画する場合は 1、グリッドを描画しない場合は 0 の値を指定します。デフォルトの -1 を指定すると、他のオプションに基づいてグリッド線の数が自動的に計算されます。

タイプ: 数値
デフォルト: -1
vAxis.gridlines.units

グラフで計算されたグリッド線を使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

詳細については、日付と時刻をご覧ください。

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

メンバーが垂直方向のマイナー グリッド線を構成するオブジェクト（vAxis.gridlines オプションと同様）。

タイプ: オブジェクト
デフォルト: null
vAxis.minorGridlines.color

グラフ領域内の縦方向のマイナー グリッド線の色。有効な HTML 色の文字列を指定します。

型: string
デフォルト: グリッド線と背景色のブレンド
vAxis.minorGridlines.count

マイナー Gridlines.count オプションはほとんど非推奨です。ただし、カウントを 0 に設定してマイナーグリッドラインを無効にする場合を除きます。マイナー グリッド線の数は、主要グリッド線（vAxis.gridlines.interval を参照）と最小要件スペース（vAxis.minorGridlines.minSpacing を参照）の間隔によって異なります。

タイプ: 数値
デフォルト: 1
vAxis.minorGridlines.units

グラフの計算のマイナー グリッドラインで使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳細については、日付と時刻をご覧ください。

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

true の場合、縦軸は対数スケールになります。注: 値はすべて正数である必要があります。

型: boolean
デフォルト: false
vAxis.scaleType

vAxis プロパティ。縦軸を対数目盛にする。次のいずれか 1 つを指定できます。

  • null - 対数目盛は実行されません。
  • 'log' - 対数目盛。負の値とゼロの値はプロットされません。このオプションは、vAxis: { logscale: true } を設定する場合と同じです。
  • 'mirrorLog' - 負の値をゼロにプロットする対数スケーリング。プロットされた負の数値は、絶対値の対数の負数です。0 に近い値は線形スケールでプロットされます。
型: string
デフォルト: null
vAxis.textPosition

グラフの軸を基準とした垂直軸のテキストの位置。サポートされている値: out、in、none。

型: string
デフォルト: 'out'
vAxis.textStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

自動生成された Y 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値（数値、日付、日時、時刻など）またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の v プロパティと、ラベルとして表示されるリテラル文字列を含むオプションの f プロパティが必要です。

オーバーライドする viewWindow.min または viewWindow.max を指定しない限り、viewWindow は自動的に最小ティックと最大ティックを含むように拡張されます。

例:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
型: 要素の配列
デフォルト: 自動
vAxis.title

垂直軸のタイトルを指定する vAxis プロパティ。

型: string
デフォルト: タイトルなし
vAxis.titleTextStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

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

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

縦軸の最大値を指定値に移動します。これはほとんどのグラフで上方向になります。データの最大 Y 値よりも小さい値に設定されている場合は無視されます。 vAxis.viewWindow.max はこのプロパティをオーバーライドします。

タイプ: 数値
デフォルト: 自動
vAxis.minValue

縦軸の最小値を指定の値に移動します。これはほとんどのグラフで下方向になります。データの最小 y 値より大きい値に設定されている場合は無視されます。 vAxis.viewWindow.min はこのプロパティをオーバーライドします。

タイプ: 数値
デフォルト: null
vAxis.viewWindowMode

縦軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。

  • 'かなり' - 最大値と最小値がグラフ領域の下部と上部に少しレンダリングされるように垂直値を拡大縮小します。viewWindow は、数値が最も近いメジャー グリッド線、または日時が最も近いマイナー グリッド線に拡張されます。
  • 「maximized」 - 最大値と最小値がグラフ領域の上部と下部に接触するように、垂直値を調整します。これにより、vaxis.viewWindow.min と vaxis.viewWindow.max は無視されます。
  • 'explicit' - グラフ領域の上と下のスケール値を指定するための、サポートが終了したオプションです。vaxis.viewWindow.min と vaxis.viewWindow.max については冗長であるため、非推奨です。この値以外のデータ値はトリミングされます。表示する最大値と最小値を示す vAxis.viewWindow オブジェクトを指定する必要があります。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には vaxis.viewWindow.min と vaxis.viewWindow.max が優先されます。
vAxis.viewWindow

縦軸の切り抜き範囲を指定します。

タイプ: オブジェクト
デフォルト: null
vAxis.viewWindow.max

レンダリングする垂直データの最大値。

vAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

タイプ: 数値
デフォルト: 自動
vAxis.viewWindow.min

レンダリングする垂直データの最小値。

vAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

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

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

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: なし
getAction(actionID)

リクエストされた actionID を含むツールチップ アクション オブジェクトを返します。

戻り値の型: オブジェクト
getBoundingBox(id)

グラフ要素 id の左、上、幅、高さを含むオブジェクトを返します。id の形式はまだ文書化されていません（これらはイベント ハンドラの戻り値です）。以下にいくつかの例を示します。

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
棒グラフや縦棒グラフの最初の系列における 3 本目の棒グラフの幅
cli.getBoundingBox('bar#0#2').width
円グラフの 5 番目のウェッジの境界ボックス
cli.getBoundingBox('slice#4')
縦棒グラフ（縦棒グラフなど）のグラフデータの境界ボックス:
cli.getBoundingBox('vAxis#0#gridline')
横（棒グラフ）グラフのグラフデータの境界ボックス:
cli.getBoundingBox('hAxis#0#gridline')

値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。

戻り値の型: オブジェクト
getChartAreaBoundingBox()

グラフのコンテンツの左側、上部、幅、高さを含むオブジェクトを返します（ラベルと凡例を除く）。

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。

戻り値の型: オブジェクト
getChartLayoutInterface()

グラフの画面上の配置とその要素に関する情報を含むオブジェクトを返します。

返されたオブジェクトで次のメソッドを呼び出すことができます。

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

グラフを描画した後に呼び出します。

戻り値の型: オブジェクト
getHAxisValue(xPosition, optional_axis_index)

チャート コンテナの左端からのピクセル オフセットである xPosition の水平方向のデータ値を返します。負の値もあります。

（例: chart.getChartLayoutInterface().getHAxisValue(400)）。

グラフを描画した後に呼び出します。

戻り値の型: number
getImageURI()

画像 URI としてシリアル化されたグラフを返します。

グラフを描画した後に呼び出します。

PNG グラフを印刷するをご覧ください。

戻り値の型: 文字列
getSelection()

選択したグラフ エンティティの配列を返します。選択可能なエンティティはポイントと凡例のエントリです。 ポイントはデータテーブルのセルと列への凡例エントリに対応します（行インデックスは null です）。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: 選択要素の配列
getVAxisValue(yPosition, optional_axis_index)

縦方向のデータ値を yPosition に返します。これは、グラフコンテナの上端からのピクセル オフセットです。負の値もあります。

（例: chart.getChartLayoutInterface().getVAxisValue(300)）。

グラフを描画した後に呼び出します。

戻り値の型: number
getXLocation(dataValue, optional_axis_index)

グラフのコンテナの左端からの dataValue のピクセル x 座標を返します。

（例: chart.getChartLayoutInterface().getXLocation(400)）。

グラフを描画した後に呼び出します。

戻り値の型: number
getYLocation(dataValue, optional_axis_index)

グラフのコンテナの上端からの dataValue のピクセル y 座標を返します。

（例: chart.getChartLayoutInterface().getYLocation(300)）。

グラフを描画した後に呼び出します。

戻り値の型: number
removeAction(actionID)

リクエストされた actionID のツールチップ アクションをグラフから削除します。

戻り値の型: none
setAction(action)

ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。

setAction メソッドは、オブジェクトをそのアクション パラメータとして受け取ります。このオブジェクトでは 3 つのプロパティを指定する必要があります。id は設定されているアクションの ID です。text はアクションのツールチップに表示されるテキストです。action はアクション テキストをクリックしたときに実行される関数です。

グラフの draw() メソッドを呼び出す前に、すべてのツールチップ アクションを設定する必要があります。詳しい説明。

戻り値の型: none
setSelection()

指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。 選択可能なエンティティはポイントと凡例のエントリです。 ポイントはデータテーブルのセルと列への凡例エントリに対応します（行インデックスは null です）。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: なし
clearChart()

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

戻り値の型: なし

イベント

これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、配信イベントをご覧ください。

名前
animationfinish

遷移アニメーションが完了すると呼び出されます。

プロパティ: なし
click

ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。

プロパティ: targetID
error

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

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

ユーザーが凡例のページ分け矢印をクリックすると呼び出されます。現在の凡例にあるゼロベースのページ インデックスと、ページの総数を返します。

プロパティ: currentPageIndex、totalPages
onmouseover

ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。

プロパティ: 行、列
onmouseout

ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。

プロパティ: 行、列
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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