折れ線グラフ

概要

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>

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

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

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

注: 旧バージョンの Internet Explorer ではマテリアル チャートは動作しません。（IE8 以前のバージョンは Material Chart に必要な 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));

Dual-Y チャート

場合によっては、2 つの独立した Y 軸を使用して 2 つの系列を折れ線グラフに表示したいことがあります。1 つは左軸、もう 1 つは右軸を表します。

2 つの Y 軸には「Temps」と「デイライト」のラベルが付いているだけでなく、それぞれに独立したスケールとグリッド線があります。この動作をカスタマイズする場合は、vAxis.gridlines オプションと vAxis.viewWindow オプションを使用します。

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

Classic コードでは若干異なります。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 の値
データの種類: 数値 … 数値
ロール: domain サポート … サポート
オプションの列のロール: …

 

設定オプション

名前
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
Animation.startup

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

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

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

  • 「linear」- 固定の速度。
  • 'in' - イーズイン - ゆっくりと始めて速く。
  • 「out」- イーズアウト - 速く、ゆっくりと。
  • 「inAndOut」 - イーズインとイーズアウト - 最初はゆっくりとスピードを上げ、その後遅くします。
型: string
デフォルト: 「リニア」
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
デフォルト: '白'
グラフ領域

メンバーがグラフ領域の配置とサイズを設定するためのオブジェクト（グラフ自体が描画される軸と凡例を除く）。数字と、それに続く % の 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
focusTarget

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

  • 'datum' - 単一のデータポイントにフォーカス。データテーブルのセルと相関します。
  • 「カテゴリ」 - 主軸に沿ったすべてのデータポイントをグループ化します。データテーブルの行と相関します。

focusTarget 'category' では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる時系列の値を比較する際に役立ちます。

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

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

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

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

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

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

型: boolean
デフォルト: false
軸

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

{
  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 パターンセット 10 進形式のサブセットです。たとえば {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 万）

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

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

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

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

型: string
デフォルト: 自動
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

hAxis メジャーのグリッド線間の最小画面スペース（ピクセル単位）です。主要なグリッド線のデフォルトは、線形目盛の場合は 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

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

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

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

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

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

マイナー Gridlines.interval オプションは、主要なグリッドライン間隔オプションに似ていますが、選択される間隔は常に、主要なグリッド線間隔の偶数です。線形目盛のデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数目盛の間隔は [1, 2, 5] です。

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

隣接するマイナー グリッド線、マイナー グリッド、メジャー グリッド間の最小スペース（ピクセル単位）。デフォルト値は、線形目盛の主要なグリッド線の minSpacing の 1/2、ログスケールの minSpacing の 1/5 です。

タイプ: 数値
デフォルト: computed
hAxis.minorGridlines.multiple

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

タイプ: 数値
デフォルト: 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 に設定します。

このオプションは 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 には、任意の 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] }

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

型: 要素の配列
デフォルト: 自動
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.allowContainerBoundaryTextCutoff

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

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

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

true の場合は、軸に沿ってテキストをテキストを斜めに描画します。その軸に沿ってテキストをさらに表示する場合は false を指定します。false の場合は、テキストを横向きにします。デフォルトの動作では、まっすぐに描画してもテキストの一部が収まらない場合は、そのテキストを傾けます。このオプションは、hAxis.textPosition が「out」（デフォルト）に設定されている場合にのみ使用できます。日付と時刻は、デフォルトは false です。

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

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

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

横軸のテキストの最大レベル数。軸のテキストラベルが密集しすぎると、サーバーは、ラベルを密結合するために、隣接するラベルを上下にシフトする可能性があります。この値は、使用するレベルの最大数を指定します。ラベルが重ならないようにする場合、サーバーはより少ないレベルを使用できます。日付と時刻のデフォルトは 1 です。

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

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

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

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

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

表示する横軸のラベルの数。1 はすべてのラベル、2 は他のすべてのラベルを表します。デフォルトでは、できる限り多くのラベルを重複なしで表示しようとします。

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

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

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

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

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

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

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

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

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

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

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

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

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

  • continuous 軸の場合:

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

  • discrete 軸の場合:

    トリミング ウィンドウが終了するまでのゼロベースの行インデックス。このインデックス以上のデータポイントがトリミングされます。vAxis.viewWindowMode.min と組み合わせて使用し、表示する要素インデックスを示す半開き範囲（最小値、最大値）を定義します。つまり、min <= index < max のようなすべてのインデックスが表示されます。

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

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

  • continuous 軸の場合:

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

  • discrete 軸の場合:

    トリミング ウィンドウの開始位置を示す 0 から始まる行インデックス。これより小さいインデックスのデータポイントはトリミングされます。vAxis.viewWindowMode.max と組み合わせて使用し、表示する要素インデックスを示す半開き範囲（最小値、最大値）を定義します。つまり、min <= index < max のようなすべてのインデックスが表示されます。

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

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

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

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

欠落しているポイントの値を推測するかどうかを指定します。true の場合、隣接する点に基づいて欠損データの値を推測します。false の場合、不明なポイントで改行が挿入されます。

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

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

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

{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>}
lineDashStyle

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

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

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

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

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

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

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

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

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

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

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

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

型: boolean
デフォルト: true
ReverseCategories

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

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

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

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

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

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

  • 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 - ブール値。時系列に凡例のエントリが存在することを意味し、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 の場合、ツールチップ内のシリーズ情報の横に色付きの正方形が表示されます。focusTarget が「category」に設定されている場合のデフォルトは true です。それ以外の場合のデフォルトは false です。

型: boolean
デフォルト: 自動
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
vAx

グラフに複数の縦軸がある場合、個々の縦軸のプロパティを指定します。 各子オブジェクトは 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'}: 数値を千桁の区切りで表示します（例: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.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

hAxis メジャーのグリッド線間の最小画面スペース（ピクセル単位）です。主要なグリッド線のデフォルトは、線形目盛の場合は 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

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

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

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.interval

マイナー Gridlines.interval オプションは、主要なグリッドライン間隔オプションに似ていますが、選択される間隔は常に、主要なグリッド線間隔の偶数です。線形目盛のデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数目盛の間隔は [1, 2, 5] です。

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

隣接するマイナー グリッド線、マイナー グリッド、メジャー グリッド間の最小スペース（ピクセル単位）。デフォルト値は、線形目盛の主要なグリッド線の minSpacing の 1/2、ログスケールの minSpacing の 1/5 です。

タイプ: 数値
デフォルト: computed
vAxis.minorGridlines.multiple

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

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

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

型: 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）、カテゴリ（列インデックスは 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）、カテゴリ（列インデックスは null）に対応しています。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: なし
clearChart()

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

戻り値の型: なし

イベント

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

名前
animationfinish

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

プロパティ: なし
click

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

プロパティ: targetID
error

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

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

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

プロパティ: currentPageIndex、totalPages
onmouseover

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

プロパティ: 行、列
onmouseout

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

プロパティ: 行、列
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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