ビジュアリゼーション: 円グラフ

概要

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

例

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

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

3D 円グラフを作成する

is3D オプションを true に設定すると、円グラフは 3 つのディメンションのように描画されます。

is3D はデフォルトで false であるため、ここでは明示的に true に設定します。

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ドーナツグラフの作成

ドーナツグラフは、中央に穴がある円グラフです。pieHole オプションを使用してドーナツグラフを作成できます。

pieHole オプションは、穴とグラフの半径の比率に対応する 0 ～ 1 の数値に設定する必要があります。ほとんどのグラフでは、0.4 ～ 0.6 の数値が最も見やすくなります。1 以上の値は無視され、0 を指定するとパイホールは完全に停止します。

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

pieHole オプションと is3D オプションを併用することはできません。その場合、pieHole は無視されます。

Google Charts は、ラベルをスライスの中心にできるだけ近づけようとします。1 つのスライスしかないドーナツグラフの場合、スライスの中心がドーナツ穴に落ちることがあります。その場合は、ラベルの色を変更します。
オプション
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
完全な HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

円グラフのローテーション

デフォルトでは、円グラフは最初のスライスの左端から上に向きます。この設定は、pieStartAngle オプションを使用して変更できます。

ここでは、pieStartAngle: 100 のオプションを指定してグラフを時計回りに 100 度回転させます。（この特定の角度は、スライス内に「イタリア語」ラベルが組み込まれるために選択されたからです）。

<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([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

スライスの詳細を確認する

slices オプションの offset プロパティを使用すると、円グラフのスライスを残りのグラフから分離できます。

スライスを分離するには、slices オブジェクトを作成し、適切なスライス番号を offset に 0 ～ 1 の間で割り当てます。以下では、スライス 4（グジャラト語）、12（マラーティー語）、14（オリヤ文字）、15（パンジャブ語）のオフセットを段階的に増やしていきます。 

<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([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

スライスの削除

スライスを省略するには、色を 'transparent' に変更します。

また、pieStartAngle を使用してグラフを 135 度回転し、pieSliceText を使用してスライスからテキストを削除し、tooltip.trigger を使用してツールチップを無効にしました。

<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([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

スライスの公開設定のしきい値

円スライスの個別にレンダリングのしきい値として値を設定できます。この値はグラフの一部に対応します（グラフ全体は 1 を表します）。このしきい値を全体に対する割合として設定するには、目的の割合を 100 で割ります（20% のしきい値の場合、値は 0.2 になります）。

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

このしきい値より小さいスライスは、1 つの「その他」スライスに結合され、しきい値を下回るすべてのスライスが結合された値になります。 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

読み込み中

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

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

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

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

データ形式

行: テーブルの各行は 1 つのスライスを表します。

Columns:

  列 0 列 1 … N 列（省略可）
使用目的: スライスのラベル スライス値 … オプションのロール
データの種類: 文字列 数値 …
ロール: domain サポート …
オプションの列のロール: なし なし …

設定オプション

名前
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']）。

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

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

型: boolean
デフォルト: true
fontSize

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

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

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

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

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

型: boolean
デフォルト: false
高さ

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

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

true の場合、3 次元グラフを表示します。

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

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

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

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

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

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

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

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

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

  • 「bottom」 - グラフの下に凡例を表示します。
  • 'labeled' - スライスをデータ値に接続する線を描画する。
  • 「left」- グラフの左側に凡例を表示します。
  • 「none」 - 凡例は表示されません。
  • →
  • top - グラフの上に凡例を表示します。
型: string
デフォルト: 「right」
凡例.maxLines

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

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

タイプ: 数値
デフォルト: 1
凡例テキストスタイル

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

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

0 ～ 1 の場合は、ドーナツグラフを表示します。半径のグラフの半径は、グラフの半径の number と等しくなります。

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

スライスの枠線の色。グラフが 2 次元の場合のみ適用されます。

型: string
デフォルト: '白'
PieSliceText

スライスに表示されるテキストの内容。次のいずれか 1 つを指定できます。

  • 'percentage' - 全体に対するスライスサイズの割合。
  • 「value」 - スライスの定量的値。
  • 'label' - スライスの名前。
  • 'none' - テキストは表示されません。
型: string
デフォルト: 「percentage」
PieSliceTextStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

グラフの回転角度（度数）。0 のデフォルトは、最初のスライスの左端を直接向きます。

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

true の場合、スライスを反時計回りに描画します。デフォルトでは時計回りに描画します。

型: boolean
デフォルト: false
PieResidueSliceColor

sliceVisibilityThreshold の下のすべてのスライスを保持する、組み合わせスライスの色。

型: string
デフォルト: '#ccc'
PieResidueSliceLabel

sliceVisibilityThreshold の下のすべてのスライスを保持する、組み合わせスライスのラベル。

型: string
デフォルト: 「その他」
スライス

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

  • color - このスライスに使用する色。有効な HTML 色の文字列を指定します。
  • offset - スライスをパイの残りの部分から、0.0（まったくない）から 1.0（円の半径）まで離す距離。
  • textStyle - このスライスのグローバル pieSliceTextStyle をオーバーライドします。

オブジェクトの配列を指定できます。配列はそれぞれ指定した順序でスライスに適用されます。また、それぞれの子に、適用するスライスを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同一で、最初のスライスを黒、4 番目のスライスを赤として宣言します。 

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

円の分数値。これを下回ると、スライスは個別に表示されません。しきい値に達していないスライスはすべて、1 つの「その他」スライスに結合されます。このスライスは、すべてのサイズの合計です。デフォルトでは、半分未満の角度のスライスは個別に表示されません。

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
タイプ: 数値
デフォルト: 半度（.5/360、1/720、.0014）
title

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

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

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

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

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

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

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

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

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

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

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

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

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

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

true の場合、ツールチップに表示されるスライス情報の横に色付きの正方形が表示されます。

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

円グラフのスライスにカーソルを合わせると表示される情報。次の値がサポートされます。

  • '両方' - [デフォルト] スライスの絶対値と全体に対する割合の両方を表示します。
  • 「value」 - スライスの絶対値のみを表示します。
  • 'percentage' - スライスによって表される全体のうち、パーセンテージのみを表示します。
型: string
デフォルト: '両方'
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」
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()

選択したグラフ エンティティの配列を返します。選択可能なエンティティはスライスと凡例のエントリです。 このグラフでは、一度に 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()

指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。 選択可能なエンティティはスライスと凡例のエントリです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: なし
clearChart()

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

戻り値の型: なし

イベント

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

名前
click

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

プロパティ: targetID
error

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

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

ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。スライスまたは凡例のエントリは、データテーブルの行と相関します（列インデックスは null です）。

プロパティ: 行、列
onmouseout

ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。スライスまたは凡例のエントリは、データテーブルの行と相関します（列インデックスは null です）。

プロパティ: 行、列
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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