可視化: 円グラフ（旧バージョン）

非推奨

このビジュアリゼーションは新しいバージョンに置き換えられました。代わりに、そちらをご利用ください。簡単に移行するには、リリースノート ページをご覧ください。

  1. Overview
  2. 例
  3. 読み込んでいます
  4. データ形式
  5. 構成オプション
  6. メソッド
  7. イベント
  8. データポリシー

概要

SVG または VML を使用してブラウザ内にレンダリングされる円グラフ スライスをクリックしたときにヒントを表示します。凡例のエントリをクリックすると、スライスがアニメーション表示されます。

作成者: Google

例

Visualization Playground でコーディングする

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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 chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

読み込んでいます

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

  google.load("visualization", "1", {packages: ["piechart"]});

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

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

データ形式

2 つの列。最初の列は文字列で、スライスのラベルが含まれている必要があります。 2 番目の列は数値で、スライスの値が含まれている必要があります。

構成オプション

名前 タイプ デフォルト 説明
backgroundColor 文字列またはオブジェクト デフォルトの色 グラフのメイン領域の背景色。 次のいずれかのオプションを選択できます。
  • HTML でサポートされている色の文字列（「red」、「#00cc00」など）。または
  • 次のプロパティを持つ n オブジェクトの説明。
    • stroke - グラフの枠線の色を表す HTML カラー文字列。
    • fill - グラフの背景色を説明する HTML カラー文字列。
    • strokeSize - グラフの枠線の太さを表す数値（ピクセル単位）。枠線がない場合は 0 に設定します。
      例: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}
borderColor 文字列またはオブジェクト デフォルトの色 グラフ要素の枠線。指定可能な値は、backgroundColor 構成オプションの値です。
色 文字列またはオブジェクトの配列 デフォルトの色

色の配列。各要素は 1 つのシリーズの色を指定します。系列ごとに 1 つの配列要素を指定する必要があります。

  • is3D=false の場合は、HTML カラーの配列です。例: color:['#00FF00','orange']
  • is3D=true の場合は、HTML カラーまたはこの種類のオブジェクト（{color:face_color, darker:shade_color}）の配列になります。ここで、color は要素の面の色、darker は色調です。ただし、3D オブジェクトに HTML 色を指定すると、顔とシェードは同じ色になり、3D 効果は低下します。例: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true true に設定した場合、ユーザーがスライスをクリックしたときにツールチップが表示されます。
focusBorderColor 文字列またはオブジェクト デフォルトの色 フォーカスされている（マウスでポイントされている）グラフ要素の周りの枠線。指定可能な値は、backgroundColor 構成オプションの値です。
身長 数値 コンテナの高さ グラフの高さ（ピクセル単位）。
is3D boolean false true に設定すると、3 次元グラフが表示されます。
凡例 string '右' 凡例の位置とタイプ。次のいずれかです
  • 「right」 - グラフの右側
  • 「left」 - グラフの左側。
  • 「top」 - グラフの上部。
  • 「Bottom」 - グラフの下。
  • 「label」- スライスの近くのラベル。
  • 「none」 - 凡例は表示されません。
legendBackgroundColor 文字列またはオブジェクト デフォルトの色 グラフの凡例領域の背景色。指定可能な値は、backgroundColor 構成オプションの値です。
legendFontSize 数値 自動 凡例のフォントのサイズ（ピクセル単位）。
legendTextColor 文字列またはオブジェクト デフォルトの色 凡例のテキストの色。 指定可能な値は、backgroundColor 構成オプションの値です。
pieJoinAngle 数値 0 この角度よりも小さいスライスは、「Other」とラベル付けされた汎用スライスに結合されます。
pieMinimalAngle 数値 0

この角度よりも小さいスライスは円グラフに描画されません（ただし、凡例のエントリは引き続き利用できます）。残りのスライスは、一定の割合で円全体に拡大されます。注: これにより、特にこの数値が大きい場合、円から数量が取り除かれるため、見かけ上の値が歪む可能性があります。

スライスのサイズを計算するために、まず pieJoinAngle より小さい角度が「Other」スライスに結合され、その後 pieMinimalAngle より大きいすべてのスライスが描画されます
title string タイトルなし グラフの上部に表示するテキストです。
titleColor 文字列またはオブジェクト デフォルトの色 グラフのタイトルの色。指定可能な値は、backgroundColor 構成オプションの値です。
titleFontSize 数値 自動 グラフのタイトルのフォントサイズ（ピクセル単位）。

tooltipFontSize		 数値 11 ツールチップ テキストのフォントサイズ。ツールチップが小さすぎて指定したフォントでテキストを保持できない場合は、サイズが小さくなることがあります。
tooltipHeight
 数値 60 ツールチップの高さ（ピクセル単位）。ツールチップの高さは固定されており、テキストの長さやフォントサイズに合わせて拡大または縮小されることはありません。ただし、グラフの高さの 3 分の 1 を超える値はすべて切り抜かれます。
tooltipWidth 数値 120 ツールチップの幅（ピクセル単位）。ツールチップの幅は固定されています。テキストの長さやフォントサイズに合わせて拡大または縮小されることはありません。ただし、グラフの幅よりも大きい値は切り抜かれます。
幅 数値 コンテナの幅 グラフの幅（ピクセル単位）。

メソッド

メソッド 戻り値の型 説明
draw(data, options) none グラフを描画します。
getSelection() 選択要素の配列 getSelection() の標準実装。選択された要素は、行とセルの要素です。ユーザーは一度に複数の行や 1 つのセルを選択できます。
setSelection() none 標準の setSelection() 実装。ただし、複数の行や 1 つのセルの選択をサポートしています。すべての選択エントリを行またはセルの選択として扱います。

イベント

名前 説明 プロパティ
onmouseover ユーザーがスライスにカーソルを合わせ、対応するセルの行インデックスと列インデックスを渡すと呼び出されます。 行、列
onmouseout ユーザーがスライスからマウス離れたときに呼び出され、対応するセルの行インデックスと列インデックスを渡します。 行、列
ready グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。 なし
select

ユーザーがスライスまたは凡例をクリックすると呼び出されます。スライスを選択すると、データテーブル内の対応するセルが選択されます。凡例を選択すると、データテーブルの対応する列が選択されます。選択された内容を確認するには、getSelection() を呼び出します。

注: スライスをクリックしても、セルの選択と選択解除は切り替わりません。スライスをクリックすると常に選択されます。一方、凡例のエントリをクリックすると、行の選択と選択解除が切り替わります。

 なし

データポリシー

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