折れ線グラフ

概要

SVG または VML を使用してブラウザ内にレンダリングされる折れ線グラフ ポイントにカーソルを合わせたときにツールチップを表示します。

例

線を曲げる

curveType オプションを function に設定すると、線を滑らかにできます。

このグラフを生成するコードを以下に示します。curveType: function オプションを使用している点に注意してください。 

  <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([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

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

マテリアル折れ線グラフの作成

Google は 2014 年に、Google プラットフォームで実行される Google のプロパティとアプリ（Android アプリなど）全体で共通のデザインをサポートするガイドラインを発表しました。この取り組みを、マテリアル デザインと呼んでいます。Google では、すべてのコアチャートの「マテリアル」バージョンを用意しています。見た目が気に入ったら、それらを使用しても構いません。

マテリアル折れ線グラフの作成は、いわゆる「クラシック」折れ線グラフの作成に似ています。Google 可視化 API を読み込み（ただし 'corechart' パッケージではなく 'line' パッケージを使用します）、データテーブルを定義してから、オブジェクトを作成します（ただし、google.visualization.LineChart ではなく google.charts.Line クラスです）。

注: 古いバージョンの Internet Explorer では、マテリアル グラフは機能しません。（IE8 以前のバージョンは、マテリアル チャートで必要となる SVG をサポートしていません）。

マテリアル折れ線グラフでは、カラーパレットの改善、角の丸み、ラベルの書式の明確化、系列間のデフォルトの間隔の厳格化、グリッド線のソフトライン、タイトルの追加（およびサブタイトルの追加）など、従来の折れ線グラフと比べて多くの点が改善されています。

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

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

マテリアル チャートはベータ版です。デザインとインタラクティビティはほぼ完成していますが、クラシック グラフで使用可能なオプションの多くはまだ利用できません。まだサポートされていないオプションの一覧については、この問題をご覧ください。

また、オプションの宣言方法は確定していないため、従来のオプションを使用している場合は、次の行をマテリアル オプションに変換する必要があります。

chart.draw(data, options);

...次の行を

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

デュアル Y グラフ

折れ線グラフでは、2 つの独立した Y 軸を持つ系列を表示できます（左の軸を 1 つの系列、右の軸をもう 1 つの系列に使用します）。

2 つの Y 軸のラベル（「Temps」と「Daylight」）が異なるだけでなく、それぞれに独自のスケールとグリッド線が設定されていることに注意してください。この動作をカスタマイズする場合は、vAxis.gridlines オプションと vAxis.viewWindow オプションを使用します。

以下のマテリアル コードでは、axes オプションと series オプションを組み合わせて、チャートの 2 次元の Y 表示を指定しています。series オプションは、それぞれに使用する軸を指定します（'Temps' と 'Daylight'。データテーブルの列名と関係する必要はありません）。axes オプションを使用すると、このグラフは二重 Y グラフになり、'Temps' 軸を左側、'Daylight' 軸を右側に配置できます。

従来のコードでは、この点が若干異なります。axes オプションではなく、vAxes オプション（水平方向のグラフでは hAxes）を使用します。また、名前を使用する代わりにインデックス番号を使用して、targetAxisIndex オプションを使用して系列を軸で調整します。

素材
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
従来
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };

トップ X チャート

注: 上 X 軸はマテリアル チャート（つまり、line パッケージのチャート）でのみ使用できます。

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

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

読み込んでいます

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

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

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

マテリアル折れ線グラフの場合、google.charts.load パッケージ名は "line"、可視化のクラス名は google.charts.Line です。

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

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

データ形式

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

Columns:

  列 0 列 1 ... 列 N
目的:
  • X 軸のグループラベル（離散）
  • X 軸の値（連続）
 行 1 の値 ... 行 N の値
データ型:
  • 文字列（離散）
  • number、date、datetime または
    timeofday（連続）
 数値 ... 数値
ロール: ドメイン データ ... データ
オプションの列ロール: ...

 

構成オプション

名前
aggregationTarget
複数のデータ選択をツールチップに統合する方法:
  • '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
animation.startup

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

型: boolean
デフォルト: false
animation.easing

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

  • 「linear」 - 一定速度。
  • 「in」- イーズイン - ゆっくりと始めてスピードアップします。
  • 「out」- イーズアウト - すばやく起動し、速度を下げます。
  • 「inAndOut」- イーズインとイーズアウト - ゆっくりとスタートし、速く、ゆっくりと。
型: string
デフォルト: 「linear」
annotations.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
annotations.datum
アノテーションをサポートするグラフの場合、annotations.datum オブジェクトを使用すると、個々のデータ要素（棒グラフの各バーに表示される値など）に指定されたアノテーションの Google Charts の選択をオーバーライドできます。色は annotations.datum.stem.color、ステムの長さは annotations.datum.stem.length、スタイルは annotations.datum.style で制御できます。
タイプ: オブジェクト
デフォルト: 色は「black」、長さは 12 文字、スタイルは「point」です。
annotations.domain
アノテーションをサポートするグラフの場合、annotations.domain オブジェクトを使用すると、ドメイン（一般的な折れ線グラフの X 軸などグラフの主軸）に指定されたアノテーションの Google Charts の選択をオーバーライドできます。色は annotations.domain.stem.color、ステムの長さは annotations.domain.stem.length、スタイルは annotations.domain.style で制御できます。
タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 5、スタイルは「point」です。
annotations.highContrast
アノテーションをサポートするグラフの場合、annotations.highContrast ブール値を使用すると、Google グラフで選択されたアノテーションの色をオーバーライドできます。デフォルトでは、annotations.highContrast が true に設定されているため、グラフはコントラストの強いアノテーションの色（暗い背景では明るい色、明るい色では暗い）が選択されます。annotations.highContrast を false に設定し、独自のアノテーション色を指定しない場合、Google グラフではアノテーションにデフォルトの系列色が使用されます。
型: boolean
デフォルト: true
annotations.stem
アノテーションをサポートするグラフの場合、annotations.stem オブジェクトを使用すると、Google Chart のステムスタイル選択をオーバーライドできます。色は annotations.stem.color で制御し、ステムの長さは annotations.stem.length で制御できます。なお、ステムの長さのオプションは、スタイル 'line' のアノテーションには影響しません。'line' データム アノテーションの場合、ステムの長さは常にテキストと同じです。'line' ドメイン アノテーションの場合、ステムはチャート全体にわたってます。
タイプ: オブジェクト
デフォルト: 色は「black」です。長さは、ドメイン アノテーションの場合は 5、データム アノテーションの場合は 12 です。
annotations.style
アノテーションをサポートするグラフの場合、annotations.style オプションを使用すると、Google Chart によるアノテーション タイプの選択をオーバーライドできます。'line' または 'point' のいずれかになります。
型: string
デフォルト: 「point」
annotations.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
axisTitlesPosition

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

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

グラフのメイン領域の背景色。単純な HTML カラー文字列（'red'、'#00cc00' など）か、次のプロパティを持つオブジェクトを指定できます。

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

グラフの枠線の色。HTML のカラー文字列で指定します。

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

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

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

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

型: string
デフォルト: 「white」
chartArea

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

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

左の枠線からグラフを描画する距離。

タイプ: 数値または文字列
デフォルト: auto
chartArea.top

上枠線からグラフを描画する距離。

タイプ: 数値または文字列
デフォルト: auto
chartArea.width

グラフ領域の幅。

タイプ: 数値または文字列
デフォルト: auto
chartArea.height

グラフ領域の高さ。

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

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

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

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

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

十字線の色。色名（例:「青」）または RGB 値（例:「#adf」）。

型: string
タイプ: default
crosshair.focused

フォーカス時の十字線のプロパティを含むオブジェクト。
例: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

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

十字線の不透明度。0.0 は完全に透明、1.0 は完全に不透明です。

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

十字の向き。縦線のみの場合は「縦」、横髪のみの場合は「横」、従来の十字線の場合は「両方」を指定できます。

型: string
Default: 「 Beta」
crosshair.selected

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

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

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

型: string
Default: 「 Beta」
curveType

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

  • 「none」- 曲線のない直線。
  • 「function」- 線の角度を滑らかにします。
タイプ: 文字列
デフォルト: 「none」
dataOpacity

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

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

グラフがユーザーベースのイベントをスローするか、ユーザー操作に反応するかを示します。false の場合、グラフは「select」などのインタラクション ベースのイベントをスローしません（ただし、Ready イベントや error イベントはスローされます）。また、ホバーテキストを表示したり、ユーザー入力に応じて変化したりしません。

型: 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.axis

デフォルトでは、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

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

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

ユーザーがズームインまたはズームアウトするときに、explorer.zoomDelta が拡大の度合いを決定します。数値が小さいほど、ズームが滑らかになり、速度が遅くなります。

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

マウスオーバーでフォーカスを受け取るエンティティのタイプ。マウスクリックで選択されるエンティティや、イベントに関連付けられるデータテーブル要素にも影響します。次のいずれか 1 つを指定できます。

  • 'datum' - 単一のデータポイントに焦点を当てます。データテーブルのセルに関連付けられます。
  • 「category」- 主軸に沿ってすべてのデータポイントをグループ化します。データテーブルの行に関連付けられます。

focusTarget の「category」では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる系列の値を比較する場合に便利です。

型: string
デフォルト: 'datum'
fontSize

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

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

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

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

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

型: boolean
デフォルト: false
hAxis

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

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

横軸のベースライン。

このオプションは continuous 軸でのみサポートされています。

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

横軸のベースラインの色。任意の HTML カラー文字列（例: 'red'、'#00cc00'）。

このオプションは continuous 軸でのみサポートされています。

タイプ: 数値
デフォルト: 「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'}: 数値を 3 桁ごとの区切り記号で表示します（例:8,000,000）
  • {format: 'scientific'}: 指数表記で数値を表示します（例:8e6）
  • {format: 'currency'}: 数値を現地通貨で表示します（例:$8,000,000.00）
  • {format: 'percent'}: 数値をパーセンテージで表示します（例:800,000,000%）
  • {format: 'short'}: 短縮形の数字を表示します（例:800 万）
  • {format: 'long'}: 数字を完全な単語として表示します（例:800 万）

日付軸のラベルの場合、これは日付形式の ICU パターンセット のサブセットです。たとえば、{format:'MMM d, y'} と指定すると、2011 年 7 月 1 日の場合は「Jul 1, 2011」と表示されます。

ラベルに適用される実際の書式は、API を読み込んだ際の言語 / 地域に基づきます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。

目盛り値とグリッド線の計算では、関連するすべてのグリッド線オプションの代替の組み合わせが検討され、フォーマットされた目盛りラベルが重複または重複する場合は、代替案は拒否されます。そのため、整数の目盛り値のみを表示する場合は format:"#" を指定できます。ただし、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

このオプションは、continuous 軸でのみサポートされています。

型: string
デフォルト: auto
hAxis.gridlines

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

{color: '#333', minSpacing: 20}

このオプションは、continuous 軸でのみサポートされています。

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

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

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

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

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

隣接するグリッド線間のサイズ（ピクセルではなくデータ値）の配列。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される gridlines.units.<unit>.interval オプションと類似しています。線形スケールの場合、デフォルトは [1, 2, 2.5, 5] です。つまり、グリッド線の値はすべての単位（1）、偶数単位（2）、または 2.5 または 5 の倍数に設定できます。これらの値の 10 倍のべき乗も考慮されます（[10, 20, 25, 50] や [.1, .2, .25, .5] など）。対数スケールの場合、デフォルトは [1, 2, 5] です。

タイプ: 1 ～ 10 の数値（10 は含みません）。
デフォルト: 計算済み
hAxis.gridlines.minSpacing

行軸の主要グリッド線間の最小画面スペース（ピクセル単位）。主要なグリッド線のデフォルトは、線形スケールでは 40、対数スケールでは 20 です。minSpacing ではなく count を指定した場合、minSpacing はカウントから計算されます。逆に、count ではなく minSpacing を指定した場合、カウントは minSpacing から計算されます。両方を指定すると、minSpacing がオーバーライドします。

タイプ: 数値
デフォルト: 計算済み
hAxis.gridlines.multiple

すべてのグリッド線と目盛りの値は、このオプションの値の倍数である必要があります。区間とは異なり、倍数の 10 倍のべき乗は考慮されません。そのため、gridlines.multiple = 1 を指定して目盛りを強制的に整数にすることも、gridlines.multiple = 1000 を指定して目盛りを強制的に 1, 000 の倍数にすることもできます。

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

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

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

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 オプションと同様に、横軸の副グリッド線を設定するメンバーを持つオブジェクト。

このオプションは、continuous 軸でのみサポートされています。

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

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

型: string
デフォルト: グリッド線と背景色の組み合わせ
hAxis.minorGridlines.count

カウントを 0 に設定してマイナー グリッドラインを無効にする場合を除き、minorGridlines.count オプションはほぼ非推奨となりました。マイナー グリッド線の数は、メジャー グリッド線の間隔（hAxis.gridlines.interval を参照）と必要最小限のスペース（hAxis.minorGridlines.minSpacing を参照）に依存するようになりました。

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

minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数スケールのデフォルトの間隔は [1, 2, 5] です。

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

隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース（ピクセル単位）。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。

タイプ: 数値
デフォルト: 計算済み
hAxis.minorGridlines.multiple

メジャー gridlines.multiple と同じです。

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

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

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

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 に設定します。

このオプションは continuous 軸でのみサポートされています。

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

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

  • null - 対数スケーリングは実行されません。
  • 「log」- 対数スケーリング。負の値とゼロの値はプロットされません。このオプションは、hAxis: { logscale: true } の設定と同じです。
  • 「mirrorLog」- 負の値とゼロの値がプロットされる対数スケーリング。負の数のプロット値は、絶対値の対数で負の値になります。0 に近い値は線形スケールでプロットされます。

このオプションは continuous 軸でのみサポートされています。

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

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

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

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

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

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

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

自動生成された X 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、timeofday など）またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の 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] }

このオプションは、continuous 軸でのみサポートされています。

型: 要素の配列
デフォルト: auto
hAxis.title

横軸のタイトルを指定する hAxis プロパティ。

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

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

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

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

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

false の場合、最も外側のラベルが非表示になり、グラフ コンテナによって切り抜かれます。true の場合、ラベルの切り抜きが許可されます。

このオプションは discrete 軸でのみサポートされています。

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

true の場合、横軸のテキストを斜めに描画して、より多くのテキストが軸に沿って収まるようにします。false の場合、横軸のテキストを上向きに描画します。縦向きに描画したときにテキストがすべて収まらない場合は、テキストが傾斜します。このオプションは、hAxis.textPosition が「out」（デフォルト）に設定されている場合にのみ使用できます。日付と時刻のデフォルトは false です。

型: boolean
デフォルト: 自動
hAxis.slantedTextAngle

横軸のテキストが傾いて描画されている場合の角度。hAxis.slantedText が false の場合、または自動モードの場合は無視されます。また、グラフがテキストを水平方向に描画すると判断しました。角度が正の場合は反時計回り、負の場合は時計回りです。

タイプ: 数値、-90 ～ 90
デフォルト: 30
hAxis.maxAlternation

横軸のテキストの最大レベル数。軸のテキストラベルが混雑しすぎると、サーバーはラベル同士を近づけるために隣接するラベルを上下に移動させることがあります。この値は、使用する最大レベル数を指定します。ラベルが重複せずに収まる場合、サーバーは使用するレベルを少なくできます。日付と時刻のデフォルトは 1 です。

タイプ: 数値
デフォルト: 2
hAxis.maxTextLines

テキストラベルの最大行数。ラベルが長すぎる場合、複数行にまたがることがあります。行数はデフォルトで、使用可能なスペースの高さによって制限されます。

タイプ: 数値
デフォルト: auto
hAxis.minTextSpacing

隣接する 2 つのテキストラベルの間に許容される水平方向の最小スペース（ピクセル単位）。ラベルの間隔が狭すぎる場合や長すぎる場合、間隔がこのしきい値を下回ることがあります。この場合、ラベルの切り捨てや一部の削除など、ラベルの整理方法のいずれかが適用されます。

タイプ: 数値
デフォルト: hAxis.textStyle.fontSize の値
hAxis.showTextEvery

表示する横軸のラベルの数。1 はすべてのラベルを表示することを意味し、2 は 1 つ以上のラベルを表示することを意味します。デフォルトでは、できる限り多くのラベルが重ならないように表示されます。

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

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

このオプションは、continuous 軸でのみサポートされています。

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

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

このオプションは、continuous 軸でのみサポートされています。

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

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

  • 「pretty」 - データの最大値と最小値がグラフ領域の左右の少し内側にレンダリングされるように水平方向の値をスケーリングします。viewWindow は、数値の場合は最も近い主要グリッド線、日時の場合は最も近い主要グリッド線に展開されます。
  • 「maximized」 - データの最大値と最小値がグラフ領域の左右に接触するように水平方向の値をスケーリングします。これにより、haxis.viewWindow.min と haxis.viewWindow.max が無視されます。
  • 「⚈」 - グラフ領域の左右のスケール値を指定するオプション（非推奨）。（haxis.viewWindow.min および haxis.viewWindow.max と冗長なため非推奨）。これらの値以外のデータ値は切り抜かれます。表示する最大値と最小値を記述する hAxis.viewWindow オブジェクトを指定する必要があります。

このオプションは、continuous 軸でのみサポートされています。

型: string
デフォルト: 「pretty」と同じですが、使用した場合、haxis.viewWindow.min と haxis.viewWindow.max が優先されます。
hAxis.viewWindow

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

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

  • continuous 軸の場合:

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

  • discrete 軸の場合:

    切り抜きウィンドウが終了する 0 ベースの行インデックス。このインデックス以上のデータポイントは切り抜かれます。vAxis.viewWindowMode.min と組み合わせて、表示する要素のインデックスを示す半開きの範囲 [min, max) を定義します。つまり、min <= index < max のようなインデックスがすべて表示されます。

hAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

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

  • continuous 軸の場合:

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

  • discrete 軸の場合:

    切り抜きウィンドウを開始するゼロベースの行インデックス。これより低いインデックスのデータポイントは切り抜かれます。vAxis.viewWindowMode.max と組み合わせて、表示する要素のインデックスを示す半開きの範囲 [min, max) を定義します。つまり、min <= index < max のようなインデックスがすべて表示されます。

hAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

タイプ: 数値
デフォルト: auto
身長

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

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

欠点の値を推測するかどうか。true の場合、隣接するポイントに基づいて欠損データの値を推測します。false の場合、不明な位置で行内に改行を残します。

これは、isStacked: true/'percent'/'relative'/'absolute' オプションを含む面グラフではサポートされていません。

型: boolean
デフォルト: false
凡例

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

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

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

  • 「start」 - 凡例に割り当てられた領域の始点に揃えます。
  • 「center」 - 凡例に割り当てられた領域の中央に配置されます。
  • 「end」 - 凡例に割り当てられた領域の末端に配置されます。

開始、中央、終了は、凡例のスタイル（垂直または水平）に関連します。たとえば、「right」の凡例では「start」と「end」がそれぞれ上下に配置されます。「top」の凡例では、「start」と「end」はそれぞれ領域の左右にあります。

デフォルト値は、凡例の位置によって異なります。「ボトム」の凡例のデフォルトは「center」です。その他の凡例のデフォルトは「start」です。

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

凡例の最大行数。凡例に線を追加するには、1 より大きい数値に設定します。注: 実際にレンダリングされる線の数を決定するために使用される正確なロジックは、現在も随時決定されます。

現在このオプションは、legend.position が top の場合にのみ機能します。

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

凡例の最初に選択されたゼロベースのページ インデックス。

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

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

  • 「Bottom」 - グラフの下。
  • 「left」 - グラフの左側。左の軸に関連付けられた系列がない場合。そのため、左側の凡例が必要な場合は、オプション targetAxisIndex: 1 を使用します。
  • 「in」 - グラフ内の左上。
  • 「none」 - 凡例は表示されません。
  • 「right」 - グラフの右側vAxes オプションとは互換性がありません。
  • 「top」 - グラフの上部。
型: string
デフォルト: 「right」
legend.textStyle

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

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

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

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

破線のオン / オフ パターン。たとえば、[4, 4] は 4 つの長さのダッシュの後に 4 の長さのギャップが続きます。[5, 1, 3] は、5 の長さのダッシュ、1 の長さのギャップ、3 の長さのダッシュ、5 の長さのギャップ、1 の長さのダッシュ、3 の長さのギャップが繰り返されます。詳しくは、破線をご覧ください。

型: 数値の配列
デフォルト: null
lineWidth

データ線の幅（ピクセル単位）。すべての線を非表示にしてポイントのみを表示するには、ゼロを使用します。series プロパティを使用すると、個々の系列の値をオーバーライドできます。

タイプ: 数値
デフォルト: 2
画面の向き

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

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

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

型: string
デフォルト: 「circle」
pointSize

表示されるポイントの直径（ピクセル単位）。すべてのポイントを非表示にするには、ゼロを使用します。series プロパティを使用すると、個々の系列の値をオーバーライドできます。トレンドラインを使用している場合は、trendlines.n.pointsize オプションでオーバーライドしない限り、pointSize オプションはトレンドラインの幅に影響します。

タイプ: 数値
デフォルト: 0
pointsVisible

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

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

型: boolean
デフォルト: true
reverseCategories

true に設定すると、右から左に系列が描画されます。デフォルトでは、左から右に描画されます。

このオプションは、discrete major 軸でのみサポートされています。

型: boolean
デフォルト: false
selectionMode

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

型: string
デフォルト: 「single」
シリーズ

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

  • annotations - このシリーズのアノテーションに適用されるオブジェクト。これは、シリーズの textStyle などを制御するために使用できます。

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    カスタマイズできる項目の完全なリストについては、さまざまな annotations オプションをご覧ください。

  • color - このシリーズに使用する色。有効な HTML カラー文字列を指定します。
  • curveType - このシリーズのグローバル curveType 値をオーバーライドします。
  • labelInLegend - グラフの凡例に表示される系列の説明。
  • lineDashStyle - このシリーズのグローバル lineDashStyle 値をオーバーライドします。
  • lineWidth - このシリーズのグローバル lineWidth 値をオーバーライドします。
  • pointShape - このシリーズのグローバル pointShape 値をオーバーライドします。
  • pointSize - このシリーズのグローバル pointSize 値をオーバーライドします。
  • pointsVisible - このシリーズのグローバル pointsVisible 値をオーバーライドします。
  • targetAxisIndex - この系列を割り当てる軸。0 はデフォルトの軸、1 は反対の軸です。デフォルト値は 0 です。1 に設定すると、軸ごとに異なる系列がレンダリングされるグラフを定義します。1 つ以上の系列がデフォルトの軸に割り当てられています。軸ごとに異なるスケールを定義できます。
  • visibleInLegend - ブール値。true はシリーズに凡例エントリがあることを意味し、false は存在しないことを意味します。デフォルトは true です。

オブジェクトの配列（それぞれが指定された順序でシリーズに適用される）を指定することも、それぞれの子にどのシリーズを適用するかを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同じです。1 つ目のシリーズは黒で凡例に存在しないため、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 には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。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 の場合、ツールチップのシリーズ情報の横に色付きの正方形が表示されます。focusTarget が「category」に設定されている場合のデフォルトは true です。それ以外の場合のデフォルトは false です。

型: boolean
デフォルト: 自動
tooltip.textStyle

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

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

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

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

ツールチップを表示するユーザー操作:

  • 「フォーカス」 - ユーザーが要素にカーソルを合わせると、ツールチップが表示されます。
  • 「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
デフォルト: デフォルトのシリーズの色
trendlines.n.degree

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

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

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

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

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

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

トレンドライン の透明度を 0.0（透明）～ 1.0（不透明）で指定します。

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

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

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

トレンドライン は、グラフ上に多数のドットを付けることで作成されます。トレンドラインの pointsVisible オプションでは、特定のトレンドラインのポイントを表示するかどうかを指定します。

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

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

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

トレンドライン が 'linear'（デフォルト）、'exponential'、'polynomial' のいずれであるかを示します。

型: string
デフォルト: linear
trendlines.n.visibleInLegend

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

型: boolean
デフォルト: false
vAxes

グラフに複数の垂直軸がある場合は、個々の垂直軸のプロパティを指定します。各子オブジェクトは vAxis オブジェクトで、vAxis でサポートされているすべてのプロパティを含めることができます。これらのプロパティ値は、同じプロパティの全般設定をオーバーライドします。

複数の縦軸を持つグラフを指定するには、まず series.targetAxisIndex を使用して新しい軸を定義し、次に vAxes を使用して軸を構成します。次の例では、系列 2 を右の軸に割り当て、カスタム タイトルとテキスト スタイルを指定しています。

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

このプロパティはオブジェクトまたは配列のいずれかです。オブジェクトはオブジェクトの集まりであり、各オブジェクトには、定義する軸を指定する数値ラベルが付けられています。これは上記の形式です。配列は、軸ごとに 1 つのオブジェクトの配列です。たとえば、次の配列スタイルの表記は、上記の vAxis オブジェクトと同じです。

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
型: オブジェクトの配列、または子オブジェクトを持つオブジェクト
デフォルト: null
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'}: 数値を 3 桁ごとの区切り記号で表示します（例: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
デフォルト: auto
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.interval

隣接するグリッド線間のサイズ（ピクセルではなくデータ値）の配列。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される gridlines.units.<unit>.interval オプションと類似しています。線形スケールの場合、デフォルトは [1, 2, 2.5, 5] です。つまり、グリッド線の値はすべての単位（1）、偶数単位（2）、または 2.5 または 5 の倍数に設定できます。これらの値の 10 倍のべき乗も考慮されます（[10, 20, 25, 50] や [.1, .2, .25, .5] など）。対数スケールの場合、デフォルトは [1, 2, 5] です。

タイプ: 1 ～ 10 の数値（10 は含みません）。
デフォルト: 計算済み
vAxis.gridlines.minSpacing

行軸の主要グリッド線間の最小画面スペース（ピクセル単位）。主要なグリッド線のデフォルトは、線形スケールでは 40、対数スケールでは 20 です。minSpacing ではなく count を指定した場合、minSpacing はカウントから計算されます。逆に、count ではなく minSpacing を指定した場合、カウントは minSpacing から計算されます。両方を指定すると、minSpacing がオーバーライドします。

タイプ: 数値
デフォルト: 計算済み
vAxis.gridlines.multiple

すべてのグリッド線と目盛りの値は、このオプションの値の倍数である必要があります。区間とは異なり、倍数の 10 倍のべき乗は考慮されません。そのため、gridlines.multiple = 1 を指定して目盛りを強制的に整数にすることも、gridlines.multiple = 1000 を指定して目盛りを強制的に 1, 000 の倍数にすることもできます。

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

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

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

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

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

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

minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数スケールのデフォルトの間隔は [1, 2, 5] です。

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

隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース（ピクセル単位）。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。

タイプ: 数値
デフォルト: 計算済み
vAxis.minorGridlines.multiple

メジャー gridlines.multiple と同じです。

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

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

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

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 に近い値は線形スケールでプロットされます。

このオプションは continuous 軸でのみサポートされています。

型: string
デフォルト: null
vAxis.textPosition

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

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

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

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

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

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

自動生成された Y 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、timeofday など）またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の 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] }
型: 要素の配列
デフォルト: auto
vAxis.title

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

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

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。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

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

  • 「pretty」 - データの最大値と最小値がグラフ領域の下部と上部の少し内側にレンダリングされるように、垂直方向の値をスケーリングします。viewWindow は、数値の場合は最も近い主要グリッド線、日時の場合は最も近い主要グリッド線に展開されます。
  • 「maximized」 - データの最大値と最小値がグラフ領域の上部と下部に接触するように、垂直方向の値をスケーリングします。これにより、vaxis.viewWindow.min と vaxis.viewWindow.max が無視されます。
  • 「⚈」 - グラフ領域の上部と下部のスケール値を指定するための非推奨のオプション。（vaxis.viewWindow.min および vaxis.viewWindow.max と冗長なため非推奨。これらの値以外のデータ値は切り抜かれます。表示する最大値と最小値を記述する vAxis.viewWindow オブジェクトを指定する必要があります。
型: string
デフォルト: 「pretty」と同じですが、使用した場合、vaxis.viewWindow.min と vaxis.viewWindow.max が優先されます。
vAxis.viewWindow

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

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

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

vAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

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

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

vAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

タイプ: 数値
デフォルト: auto
幅

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

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: none
getAction(actionID)

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

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

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

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
横棒グラフまたは縦棒グラフの 1 つ目の系列における 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 チャートの印刷をご覧ください。

戻り値の型: string
getSelection()

選択したグラフ エンティティの配列を返します。 選択可能なエンティティは、ポイント、アノテーション、凡例のエントリ、カテゴリです。 ポイントまたはアノテーションは、データテーブルのセル、凡例のエントリ（行インデックスは null）、カテゴリは行（列インデックスが 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 メソッドは、アクション パラメータとしてオブジェクトを受け取ります。このオブジェクトでは、id（設定するアクションの ID）、text（アクションのツールチップに表示するテキスト）、action（ユーザーがアクション テキストをクリックしたときに実行する関数）の 3 つのプロパティを指定する必要があります。

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

戻り値の型: none
setSelection()

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

戻り値の型: none
clearChart()

チャートを消去し、割り当て済みリソースをすべて解放します。

戻り値の型: none

イベント

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

名前
animationfinish

遷移アニメーションの完了時に呼び出されます。

Properties（プロパティ）: なし
click

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

プロパティ: targetID
error

グラフのレンダリング中にエラーが発生したときに呼び出されます。

プロパティ: id、message
legendpagination

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

プロパティ: currentPageIndex、totalPages
onmouseover

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

プロパティ: row、column
onmouseout

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

プロパティ: row、column
ready

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

Properties（プロパティ）: なし
select

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

Properties（プロパティ）: なし

データポリシー

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