概要
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>
<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 度回転させています。（この特定の角度によって「Italian」ラベルがスライス内に収まります）。
<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>
Slice の展開
slices オプションの offset プロパティを使用すると、円のスライスをグラフの他の部分から分離できます。
スライスを区切るには、slices オブジェクトを作成し、適切なスライス番号に 0 ～ 1 の offset を割り当てます。以下では、スライス 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.
このしきい値より小さいスライスは、単一の「その他」スライスに結合され、すべてのスライスの合計値がしきい値を下回ることになります。
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);
データ形式
Rows: テーブルの各行はスライスを表します。
Columns:
| 列 0 | 列 1 | ... | 列 N（省略可） | |
|---|---|---|---|---|
| 目的: | スライスのラベル | スライス値 | ... | オプションのロール |
| データ型: | string | 数値 | ... | |
| ロール: | ドメイン | データ | ... | |
| オプションの列ロール: | まったく管理できない | まったく管理できない | ... |
構成オプション
| 名前 | |
|---|---|
| backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列（ タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
| backgroundColor.stroke |
グラフの枠線の色。HTML のカラー文字列で指定します。 型: string
デフォルト: 「#666」
|
| backgroundColor.strokeWidth |
枠線の幅（ピクセル単位）。 タイプ: 数値
デフォルト: 0
|
| backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: 「white」
|
| chartArea |
グラフ領域（グラフ自体が描画される場所。軸と凡例を除く）の配置とサイズを構成するメンバーを持つオブジェクト。サポートされている形式は、数字、または数字の後に % が続く形式です。単純な数字はピクセル単位の値で、数字の後に % を続けるとパーセンテージになります。例: タイプ: オブジェクト
デフォルト: null
|
| chartArea.backgroundColor |
グラフ領域の背景色。文字列を使用する場合は、16 進数文字列（例:「#fdc」）、英語の色の名前）を使用できます。オブジェクトを使用する場合は、次のプロパティを指定できます。
タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
| chartArea.left |
左の枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.top |
上枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.width |
グラフ領域の幅。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.height |
グラフ領域の高さ。 タイプ: 数値または文字列
デフォルト: auto
|
| 色 |
グラフの要素に使用する色。文字列の配列。各要素は HTML カラー文字列です（例: 型: 文字列の配列
デフォルト: デフォルトの色
|
| enableInteractivity |
グラフがユーザーベースのイベントをスローするか、ユーザー操作に反応するかを示します。false の場合、グラフは「select」などのインタラクション ベースのイベントをスローしません（ただし、Ready イベントや error イベントはスローされます）。また、ホバーテキストを表示したり、ユーザー入力に応じて変化したりしません。 型: boolean
デフォルト: true
|
| fontSize |
グラフ内のすべてのテキストのデフォルトのフォントサイズ（ピクセル単位）。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 タイプ: 数値
デフォルト: 自動
|
| fontName |
グラフのすべてのテキストに使用されるデフォルトのフォントです。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 型: string
デフォルト: 「Arial」
|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。 型: boolean
デフォルト: false
|
| 身長 |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の高さ
|
| is3D |
true の場合、3 次元グラフを表示します。 型: boolean
デフォルト: false
|
| 凡例 |
凡例のさまざまな要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト
デフォルト: null
|
| legend.alignment |
凡例の配置。次のいずれか 1 つを指定できます。
開始、中央、終了は、凡例のスタイル（垂直または水平）に関連します。たとえば、「right」の凡例では「start」と「end」がそれぞれ上下に配置されます。「top」の凡例では、「start」と「end」はそれぞれ領域の左右にあります。 デフォルト値は、凡例の位置によって異なります。「ボトム」の凡例のデフォルトは「center」です。その他の凡例のデフォルトは「start」です。 型: string
デフォルト: 自動
|
| legend.position |
凡例の位置。次のいずれか 1 つを指定できます。
型: string
デフォルト: 「right」
|
| legend.maxLines |
凡例の最大行数。凡例に線を追加するには、1 より大きい数値に設定します。注: 実際にレンダリングされる線の数を決定するために使用される正確なロジックは、現在も随時決定されます。 現在このオプションは、legend.position が top の場合にのみ機能します。 タイプ: 数値
デフォルト: 1
|
| legend.textStyle |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| pieHole |
0 ～ 1 の場合、ドーナツグラフが表示されます。半径がグラフの半径の タイプ: 数値
デフォルト: 0
|
| pieSliceBorderColor |
スライスの枠線の色。グラフが 2 次元の場合にのみ適用されます。 型: string
デフォルト: 「white」
|
| pieSliceText |
スライスに表示されるテキストの内容。次のいずれか 1 つを指定できます。
型: string
デフォルト: 'percentage'
|
| pieSliceTextStyle |
スライスのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 {color: <string>, fontName: <string>, fontSize: <number>}
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| pieStartAngle |
グラフを回転させる角度（度数）。デフォルトの タイプ: 数値
デフォルト:
0 |
| reverseCategories |
true の場合、スライスを反時計回りに描画します。デフォルトでは時計回りに描画されます。 型: boolean
デフォルト: false
|
| pieResidueSliceColor |
sliceVisibilityThreshold 以下のすべてのスライスを保持する組み合わせスライスの色。 型: string
デフォルト: 「#ccc」
|
| pieResidueSliceLabel |
sliceVisibilityThreshold を下回るすべてのスライスを保持する組み合わせスライスのラベル。 型: string
デフォルト: 「その他」
|
| スライス |
オブジェクトの配列。各オブジェクトは円グラフ内の対応するスライスの形式を表します。スライスにデフォルト値を使用するには、空のオブジェクト（つまり、
オブジェクトの配列（それぞれのオブジェクトが指定された順序でスライスに適用される）を指定することも、各子にどのスライスを適用するスライスを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同じであり、最初のスライスを黒、4 番目のスライスを赤として宣言します。
slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
型: オブジェクトの配列、またはネストされたオブジェクトを含むオブジェクト
デフォルト: {}
|
| sliceVisibilityThreshold |
円の小数値。これより下にスライスは個別に表示されません。このしきい値に達していないすべてのスライスは、すべてのサイズの合計である 1 つの「その他」スライスに結合されます。デフォルトでは、0.5 度未満のスライスは個別に表示されません。
// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
タイプ: 数値
デフォルト: 0.5 度（.5/360、1/720、.0014）
|
| title |
グラフの上部に表示するテキストです。 型: string
デフォルト: タイトルなし
|
| titleTextStyle |
タイトルのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| ツールチップ |
さまざまなツールチップ要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
|
| tooltip.ignoreBounds |
注: これは HTML ツールチップにのみ適用されます。SVG ツールチップで有効にすると、グラフの境界外のオーバーフローは切り抜かれます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。 タイプ: ブール値
デフォルト: false
|
| tooltip.isHtml |
true に設定した場合、SVG 表示ではなく HTML 表示のツールチップが使用されます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。 注: ツールチップ列のデータロールによる HTML ツールチップ コンテンツのカスタマイズは、バブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: false
|
| tooltip.showColorCode |
true の場合、ツールチップのスライス情報の横に色付きの正方形が表示されます。 型: boolean
デフォルト: false
|
| tooltip.text |
円グラフのスライスにカーソルを合わせたときに表示する情報。次の値を使用できます。
型: string
Default: 「 Beta」
|
| tooltip.textStyle |
ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
ツールチップを表示するユーザー操作:
型: string
デフォルト: 「focus」
|
| 幅 |
グラフの幅（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。グラフは、 戻り値の型: none
|
getAction(actionID) |
リクエストされた 戻り値の型: オブジェクト
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getChartAreaBoundingBox() |
グラフ コンテンツの左、上、幅、高さを含むオブジェクトを返します（ラベルと凡例を除く）。
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getChartLayoutInterface() |
グラフの画面上の位置とその要素に関する情報を含むオブジェクトを返します。 返されたオブジェクトに対して、次のメソッドを呼び出すことができます。
グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getHAxisValue(xPosition, optional_axis_index) |
例: グラフが描画された後に呼び出されます。 戻り値の型: number
|
getImageURI() |
画像の URI としてシリアル化されたグラフを返します。 グラフが描画された後に呼び出されます。 PNG チャートの印刷をご覧ください。 戻り値の型: string
|
getSelection() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、スライスと凡例のエントリです。
このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。
戻り値の型: 選択要素の配列
|
getVAxisValue(yPosition, optional_axis_index) |
例: グラフが描画された後に呼び出されます。 戻り値の型: number
|
getXLocation(dataValue, optional_axis_index) |
グラフのコンテナの左端を基準とする 例: グラフが描画された後に呼び出されます。 戻り値の型: number
|
getYLocation(dataValue, optional_axis_index) |
グラフのコンテナの上端を基準とする 例: グラフが描画された後に呼び出されます。 戻り値の型: number
|
removeAction(actionID) |
リクエストされた 戻り値の型:
none |
setAction(action) |
ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。
すべてのツールチップ アクションは、グラフの 戻り値の型:
none |
setSelection() |
指定したグラフ エンティティを選択します。前の選択をキャンセルします。
選択可能なエンティティは、スライスと凡例のエントリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、イベントを発生させるをご覧ください。
| 名前 | |
|---|---|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 スライスまたは凡例のエントリがデータテーブルの行に関連付けられている（列インデックスが null）。 プロパティ: row、column
|
onmouseout |
ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 スライスまたは凡例のエントリがデータテーブルの行に関連付けられている（列インデックスが null）。 プロパティ: row、column
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。