視覚化: 縦棒グラフ

Stay organized with collections Save and categorize content based on your preferences.

概要

縦棒グラフは、SVG または VML を使用して、ユーザーのブラウザに表示される垂直棒グラフです。他の Google グラフと同様に、縦棒グラフではユーザーがデータにカーソルを合わせたときにツールチップが表示されます。このグラフの横置きバージョンについては、棒グラフをご覧ください。

列の色の設定

4 つの貴金属の密度をチャート化してみましょう。

上記の例では、すべての色がデフォルトの青色です。これは、それらがすべて同じシリーズの一部であるためです。2 番目のシリーズがある場合は、赤色になります。これらの色はスタイルの役割でカスタマイズできます。

色の選択方法は 3 種類あり、データ表に RGB 値、英語の色名、CSS に似た宣言がすべて示されています。

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

列のスタイル

スタイルロールを使用すると、CSS に似た宣言で列の外観をコントロールできます。

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

グラフ内でスタイルを自由に組み合わせる(スタイルを選択してそれに合わせる)ことはおすすめしませんが、すべてのスタイル属性を示すためにサンプラーを次に示します。

最初の 2 つの列は、それぞれ特定の color を使用します(1 つ目は英語の名前、2 列目は RGB 値)。opacity は選択されていないため、デフォルトの 1.0(完全に不透明)が使用されています。そのため、2 番目の列は背後のグリッド線が見えにくくなります。3 列目では、opacity が 0.2 で、グリッド線が表示されます。4 番目では、stroke-colorstroke-width の 3 つのスタイル属性を使用して枠線を描画しています。また、fill-color を使用して内側の長方形の色を指定しています。さらに右端の列では、stroke-opacityfill-opacity を使用して、枠線と塗りつぶしの不透明度を選択します。

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

列のラベル付け

グラフには、ティックラベル、凡例ラベル、ツールチップのラベルなど、さまざまな種類のラベルがあります。このセクションでは、縦棒グラフの列の中(または近く)にラベルを表示する方法を説明します。

各列に適切な化学記号が付けられたとしましょう。これを行うには、annotation ロールを使用します。

データテーブルで、列ラベルを保持する { role: 'annotation' } を使用して新しい列を定義します。

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

ユーザーが列にカーソルを合わせるとデータ値を確認できますが、列自体に含めることもできます。

各列のアノテーションを指定する DataView を作成するため、これは必要以上に複雑です。

  <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([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

値を別の形式にする場合は、フォーマッタを定義し、次のような関数でラップします。

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

次に、これを calc: getValueAt.bind(undefined, 1) で呼び出すことができます。

ラベルが大きすぎて列内に収まらない場合は、以下のように表示されます。

積み上げ棒グラフ

積み上げ棒グラフは、関連する値を積み上げる縦棒グラフです。負の値がある場合は、チャートのベースラインより下に逆の順序で積み重ねられます。通常は、カテゴリがコンポーネントに自然に分割される場合に使用します。たとえば、仮に書籍の販売をジャンルで分類し、その期間で比較した場合を考えてみましょう。

積み上げ棒グラフを作成するには、isStacked オプションを true に設定します。

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

積み上げ棒グラフは 100% 積み重ねもサポートしています。各ドメイン値の要素の積み重ねを合計すると 100% になります。これには、isStacked: 'percent' で各値を 100% の割合でフォーマットし、isStacked: 'relative' で各値を 1 の小数としてフォーマットします。isStacked: 'absolute' オプションも用意されています。これは機能的に isStacked: true と同等です。

右側の 100% 積み上げグラフでは、ティック値は 0 から 1 の相対的なスケールに 1 の比率で示されていますが、軸の値は割合で表示されています。これは、パーセント軸の目盛りが、相対的な 0-1 のスケール値に「#.##%」の形式を適用した結果であるためです。isStacked: 'percent' を使用する場合は、相対的な 0 ~ 1 のスケールを使用してティック/軸の値を指定してください。

積み上げ
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
100% スタック
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

マテリアル縦棒グラフを作成する

Google は 2014 年、Google プラットフォームで実行されるプロパティとアプリ(Android アプリなど)で共通のデザインをサポートすることを目的としたガイドラインを発表しました。この取り組みをマテリアル デザインと呼びます。すべてのコアチャートの「マテリアル」バージョンを提供します。見た目がよければ、自由にご利用ください。

マテリアル縦棒グラフは、現在「クラシック」縦棒グラフと呼ぶものの作成に似ています。Google の可視化 API を('corechart' パッケージではなく 'bar' パッケージを使用して)読み込み、データテーブルを定義して、オブジェクトを作成します(ただし、google.visualization.ColumnChart ではなく google.charts.Bar クラスを使用します)。

棒グラフと縦棒グラフは基本的に同じですが、方向付けのため、縦棒グラフ(従来の縦棒グラフ)と横棒グラフ(棒グラフ)のどちらでも、マテリアル 棒グラフと呼びます。マテリアルの場合、唯一の違いは bars オプションです。'horizontal' に設定すると、向きは従来のクラシック 棒グラフのようになります。それ以外の場合、バーは垂直になります。

注: マテリアル チャートは、旧バージョンの Internet Explorer では機能しません。(IE8 とそれ以前のバージョンでは、マテリアル チャートに必要な SVG はサポートされていません)。

マテリアル縦棒グラフは、改善されたカラーパレット、角の丸み、ラベルの書式の明確化、シリーズ間のデフォルトの間隔の縮小、グリッドやタイトルのソフト化(および字幕の追加)など、従来の縦棒グラフよりも多くの小さな改善が行われています。

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

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

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

chart.draw(data, options);

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

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

google.charts.Bar.convertOptions() を使用すると、hAxis/vAxis.format プリセット オプションなど、特定の機能を利用できます。

デュアル Y グラフ

2 つの系列を 2 つの独立した Y 軸で縦棒グラフに表示したい場合があります。1 つは左軸、もう 1 つは右軸です。

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

読み込み

google.charts.load パッケージ名は "corechart" です。ビジュアリゼーションのクラス名は google.visualization.ColumnChart です。

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.ColumnChart(container);

マテリアル縦棒グラフの場合、google.charts.load パッケージ名は "bar" です。(入力ミスではありません。マテリアル 棒グラフは両方の向きに対応します)。ビジュアリゼーションのクラス名は google.charts.Bar です。(入力ミスではありません。マテリアル 棒グラフは両方の向きに対応します)。

  google.charts.load("current", {packages: ["bar"]});
  var chart = new google.charts.Bar(container);

データ形式

表の各行は、隣接する棒のグループを表します。

行: 表の各行は、棒のグループを表します。

Columns:

  列 0 列 1 N
使用目的:
  • X 軸のグループラベル(個別
  • X 軸の値(連続
このグループの棒 1 の値 このグループの棒 N の値
データの種類:
  • string(discrete
  • number、date、datetime または
    timeofday(連続
数値 数値
ロール: domain サポート サポート
オプションの列の役割:

 

設定オプション

名前
アニメーションの長さ

アニメーションの再生時間(ミリ秒単位)。詳細については、アニメーションのドキュメントをご覧ください。

タイプ: 数値
デフォルト: 0
アニメーション.イージング

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

  • 'linear' - 一定の速度です。
  • 'in' - イーズイン - ゆっくりとスピードを上げます。
  • 'out' - イースト - 速く、ゆっくりスローダウンします。
  • in'Out
型: string
デフォルト: 'linear'
アニメーション.startup

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

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

棒グラフ縦棒グラフtrue に設定すると、すべてのアノテーションが棒グラフや列の外側に描画されます。

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

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

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

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

タイプ: オブジェクト
デフォルト: null
annotation.datum
アノテーションをサポートするグラフの場合、annotations.datum オブジェクトを使用すると、個々のデータ要素に提供されるアノテーション(棒グラフの各棒に表示される値など)に対して Google グラフによる選択をオーバーライドできます。色は annotations.datum.stem.color、ステムの長さは annotations.datum.stem.length、スタイルは annotations.datum.style で制御できます。
タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 12、スタイルは「点」です。
annotation.domain
アノテーションをサポートするグラフの場合、annotations.domain オブジェクトを使用すると、ドメイン(一般的な折れ線グラフの X 軸など)に提供されるアノテーションに Google Charts で選択した内容をオーバーライドできます。色は annotations.domain.stem.color、ステムの長さは annotations.domain.stem.length、スタイルは annotations.domain.style で制御できます。
タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 5、スタイルは「点」です。
annotation.highContrast
アノテーションをサポートするグラフの場合、annotations.highContrast ブール値を使用して、Google チャートのアノテーション色に選択した値をオーバーライドできます。デフォルトでは、annotations.highContrast は true です。これにより、チャートはコントラストの強いアノテーション カラー(暗い背景には明るい色、ライトには暗い色)を選択します。annotations.highContrast を false に設定し、独自のアノテーション色を指定しない場合、Google Charts はアノテーションのデフォルトの系列色を使用します。
型: boolean
デフォルト: true
annotation.stem
アノテーションをサポートするグラフの場合、annotations.stem オブジェクトを使用すると、Google Charts で選択されているスタイルのスタイルをオーバーライドできます。色は annotations.stem.color で、ステムの長さは annotations.stem.length で制御できます。ステムの長さのオプションは、スタイルが 'line' のアノテーションには影響しません。'line' データム アノテーションの場合、ステムの長さは常にテキストと同じです。'line' ドメイン アノテーションの場合、ステムはグラフ全体に表示されます。
タイプ: オブジェクト
デフォルト: 色は「黒」です。長さは、ドメインのアノテーションの場合は 5、データムのアノテーションの場合は 12 です。
annotation.style
アノテーションをサポートするグラフの場合、annotations.style オプションを使用すると、Google Chart で選択されたアノテーション タイプをオーバーライドできます。'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' など)か、次のプロパティを持つオブジェクトのいずれかです。

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

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

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

ボーダーの幅(ピクセル単位)

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

グラフの色を HTML の色文字列で表示します。

型: string
デフォルト: white
bar.groupWidth
次のいずれかのグループで指定された棒のグループの幅。
  • ピクセル(例: 50 個)。
  • 各グループで使用可能な幅の割合(「20%」など)。「100%」は、グループ間にスペースがないことを意味します。
タイプ: 数値または文字列
デフォルト: ゴールドの比率(約「61.8%」)。
バー

マテリアル 棒グラフの棒が縦方向か横方向か。このオプションは、クラシック棒グラフまたはクラシック縦棒グラフには影響を与えません。

タイプ: 「水平」または「垂直」
デフォルト: 'カテゴリ'
グラフ領域

チャート領域(軸と凡例を除くグラフ自体が描画される領域)の配置とサイズを設定するメンバーを持つオブジェクト。サポートされているのは、数値、または数値に続けて % が続く形式です。単純な数値はピクセル単位の値で、その後に % が続く割合です。例: 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
グラフ領域の幅

グラフの領域の幅。

タイプ: 数値または文字列
デフォルト: auto
グラフ領域の高さ

グラフ領域の高さ。

タイプ: 数値または文字列
デフォルト: auto
グラフのサブタイトル

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

型: string
デフォルト: null
グラフのタイトル

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

型: string
デフォルト: null

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

型: 文字列の配列
デフォルト: デフォルトの色
データの不透明度

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

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

グラフがユーザーベースのイベントをスローするか、ユーザー インタラクションに反応するか。false の場合、グラフは「select」やその他のインタラクション ベースのイベントをスローしません(ただし、Ready イベントや Error イベントをスローします)。また、ユーザーの入力に応じて、ホバーテキストやその他の変更を表示しません。

型: boolean
デフォルト: true
explorer

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

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

注: エクスプローラでは連続軸(数字や日付など)のみを使用できます。

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

Google Charts Explorer は、

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

デフォルトでは、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
フォーカス ターゲット

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

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

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

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

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

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

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

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

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

型: 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'}: 数値を 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 日最初の「2011 年 7 月 1 日」という値が表示されます。

ラベルに適用される実際の書式は、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

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 オプションは、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 です。

タイプ: 数値
デフォルト: 計算済み
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')。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {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 軸でのみサポートされます。

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

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

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

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

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

color には、任意の HTML カラー文字列を指定できます(例: 'red''#00cc00')。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {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.slantedTextfalse であるか、自動モードになっている場合、テキストは横方向に描画されます。角度が正の場合、回転は反時計回り、負の場合は時計回りです。

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

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

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

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

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

隣接する 2 つのテキストラベル間の最小水平間隔(ピクセル単位)。ラベルの間隔が広すぎる場合や間隔が長すぎると、間隔がこのしきい値を下回る可能性があり、その場合はラベルの整理が不要の措置のいずれかが適用されます(ラベルの切り捨てや、その一部の破棄など)。

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

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

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

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

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

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

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

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

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

横軸を拡大して、チャート領域内の値を表示する方法を指定します。次の文字列値がサポートされています。

  • 'like' - 最大値と最小値がグラフ領域の左右の両側に少しずつレンダリングされるように水平方向の値を調整します。 viewWindow は、最も近いメジャー グリッドライン(数値)または最も近いマイナー グリッドライン(日時)に展開されます。
  • 'maximized' - 最大値と最小値がグラフ領域の左側と右側に収まるように水平方向の値を調整します。これにより、haxis.viewWindow.minhaxis.viewWindow.max が無視されます。
  • 「explicit」 - グラフ領域の左右のスケーリング値を指定するための、非推奨のオプション。(haxis.viewWindow.minhaxis.viewWindow.max は冗長であるため非推奨です)。これらの値外のデータ値はトリミングされます。表示する最大値と最小値を記述する hAxis.viewWindow オブジェクトを指定する必要があります。

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

型: string
デフォルト: ty と同等ですが、使用した場合は haxis.viewWindow.minhaxis.viewWindow.max が優先されます。
hAxis.viewWindow

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

タイプ: オブジェクト
デフォルト: null
hAxis.viewWindow.max
  • continuous 軸の場合:

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

  • discrete 軸の場合:

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

hAxis.viewWindowMode が「 BigQuery で」または「最大化」された場合は無視されます。

タイプ: 数値
デフォルト: auto
hAxis.viewWindow.min
  • continuous 軸の場合:

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

  • discrete 軸の場合:

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

hAxis.viewWindowMode が「 BigQuery で」または「最大化」された場合は無視されます。

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

グラフの高さ(ピクセル単位)です。

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

true に設定すると、各ドメインのすべての系列の要素を積み重ねます。 注: 縦棒グラフ面グラフステップ付きエリアのグラフでは、系列要素の順序を合わせるため、凡例の順序を逆にします(例: 系列 0 は最下位の凡例項目になります)。これは、棒グラフには適用されません

isStacked オプションは 100% スタッキングもサポートしており、各ドメイン値の要素のスタックが合計されて 100% になります。

isStacked のオプションは次のとおりです。

  • false - 要素がスタックしません。これがデフォルトのオプションです。
  • true - 各系列のすべての系列の要素を積み重ねます。
  • 'percent' - すべてのシリーズの要素をドメイン値ごとに積み重ね、合計が 100% になるように再スケーリングします。各要素の値の割合は 100% になります。
  • 'relative' - 各系列のすべての系列の要素を積み重ね、合計が 1 になるように再スケーリングします。その際、各要素の値が 1 の比率として計算されます。
  • 'absolute' - isStacked: true と同じように機能します。

100% のスタッキングの場合、各要素の計算値が実際の値の後にツールチップに表示されます。

ターゲット軸はデフォルトで、相対的な 0 ~ 1 のスケールに基づいて 'relative' の目盛り値に基づいて表示され、'relative' の場合は 1 ~'percent' の 0 ~ 100% の値となります(注: 'percent' オプションを使用する場合、軸/目盛りの値はパーセントで表示されますが、実際の値は 0 ~ 1 の相対的なスケール値です)。これは、パーセント軸の目盛りが、相対的な 0 ~ 1 のスケール値に「#.##%」の形式を適用した結果であるためです。isStacked: 'percent' を使用する場合は、必ず 0 ~ 1 の相対スケール値を使用してティック/グリッドラインを指定してください)。適切な hAxis/vAxis オプションを使用して、グリッド線や目線の値と書式設定をカスタマイズできます。

100% のスタッキングは number タイプのデータ値のみをサポートし、ベースラインは 0 である必要があります。

型: ブール値/文字列
デフォルト: false
凡例

凡例のさまざまな側面を構成するためのメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、オブジェクト リテラル表記を使用します。以下をご覧ください。

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

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

タイプ: 数値
デフォルト: 0
凡例の位置

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

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

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

  • start - 凡例に割り当てられた領域のスタートに合わせて配置されます。
  • 「center」 - 凡例に割り当てられた領域に中央揃えで配置されます。
  • 'end' - 凡例に割り当てられた領域の終端に合わせます。

開始、中央、終了は、凡例のスタイル(垂直または水平)を基準にします。 たとえば、「右」の凡例の場合、「start」と「end」はそれぞれ上部と下部にあります。「上部」の凡例の場合、「start」と「end」はそれぞれ領域の左右にあります。

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

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

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

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

color には、任意の HTML カラー文字列を指定できます(例: 'red''#00cc00')。fontNamefontSize もご覧ください。

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

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

型: string
デフォルト: 'horizontal'
カテゴリ

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

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

型: boolean
デフォルト: false
series

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

  • annotations - このシリーズのアノテーションに適用するオブジェクト。たとえば、これを使用して、シリーズの textStyle を制御できます。

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

    カスタマイズ可能な項目の一覧については、annotations の各種オプションをご覧ください。

  • color - このシリーズで使用する色。有効な HTML 色文字列を指定してください。
  • targetAxisIndex - このシリーズを割り当てる軸。0 はデフォルトの軸、1 は反対軸です。デフォルト値は 0 です。異なる系列を異なる軸でレンダリングするグラフを定義するには、1 に設定します。少なくとも 1 つの系列がデフォルトの軸に多く割り当てられます。軸ごとに異なるスケールを定義できます。
  • visibleInLegend - ブール値。true の場合は、シリーズ内に凡例項目が存在することを意味し、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
デフォルト: タイトルなし
タイトルの位置

グラフタイトルをチャートエリアと比較する場所です。サポートされている値:

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

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

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

color には、任意の HTML カラー文字列を指定できます(例: 'red''#00cc00')。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {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')。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {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
デフォルト:デフォルトの系列の色
trendslines.n.度

type: 'polynomial'トレンドラインでは、多項式の次数(二乗の場合は 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
Trendslines.n.pointSize

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

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

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

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

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

型: boolean
デフォルト: false
トレンドライン.n.タイプ

トレンドライン'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'}: 数値を 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

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

minimumGridGrid.count オプションは、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 です。

タイプ: 数値
デフォルト: 計算済み
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')。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {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] }
型: 要素の配列
デフォルト: auto
vAxis.title

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

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

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

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

color には、任意の HTML カラー文字列を指定できます(例: 'red''#00cc00')。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {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

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

  • 'fair' - 最大値と最小値がグラフ領域の下部と上部に少しレンダリングされるように、垂直値を拡大縮小します。viewWindow は、最も近いメジャー グリッドライン(数値)または最も近いマイナー グリッドライン(日時)に展開されます。
  • 'maximized' - 最大値と最小値がグラフ領域の上部と下部に収まるように垂直値を調整します。これにより、vaxis.viewWindow.minvaxis.viewWindow.max が無視されます。
  • 「explicit」 - グラフ領域の上と下のスケール値を指定するための、非推奨のオプション。(vaxis.viewWindow.minvaxis.viewWindow.max には冗長であるため、非推奨です。これらの値外のデータ値はトリミングされます。表示する最大値と最小値を記述する vAxis.viewWindow オブジェクトを指定する必要があります。
型: string
デフォルト: ty と同等ですが、使用した場合は vaxis.viewWindow.minvaxis.viewWindow.max が優先されます。
vAxis.viewWindow

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

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

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

vAxis.viewWindowMode が「 BigQuery で」または「最大化」された場合は無視されます。

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

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

vAxis.viewWindowMode が「 BigQuery で」または「最大化」された場合は無視されます。

タイプ: 数値
デフォルト: auto
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

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

プロパティ: currentPageIndex、totalPages
onmouseover

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

プロパティ: 行、列
onmouseout

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

プロパティ: 行、列
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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