概要
SVGまたはVMLを使用してブラウザ内でレンダリングされる円グラフ。 表示ツールチップが浮上スライス.,
Example
3D円グラフの作成
is3D
オプションをtrue
に設定すると、ピーグラフは三次元のように描画されます。
is3D
isfalse
デフォルトでは、ここでは明示的にtrue
:
ドーナツチャートを作成する
ドーナツチャートは、中央に穴がある円グラフです。, pieHole
オプションでドーナツチャートを作成できます。
pieHole
オプションは、穴とチャートの間の半径の比に対応する0と1の間の数に設定する必要があります。 0.4と0.6の間の数字は、ほとんどのチャートで最高に見えます。1以上の値は無視され、0の値はピエホールを完全にシャットダウンします。
pieHole
とis3D
オプションを組み合わせることはできません。pieHole
は無視されます。,
Google Chartsは、ラベルをできるだけスライスの中心の近くに配置しようとすることに注意してください。 あなたはjustoneスライスとドーナツチャートを持っている場合は、スライスの中心がドーナツの穴に落ちることがあります。 この場合、ラベルの色を変更します。
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
円グラフの回転
デフォルトでは、円グラフは最初のスライスの左端から始まります。 これを変更できますpieStartAngle
オプション:
ここでは、pieStartAngle: 100
オプションでチャートを時計回りに100度回転させます。, (このようにして選定されたこparticularangleが、”イタリアン”ラベルが部屋になります。)
スライスの展開
円グラフの残りの部分から円グラフを分離するには、offset
slices
オプションのプロパティを使用します。
スライスを分離するには、slices
オブジェクトを作成し、適切なスライス番号をoffset
0と1の間。, 以下では、スライス4(Gujarati)、12(Marathi)、14(Oriya)、および15(Punjabi)に徐々に大きなオフセットを割り当てます。
スライスの削除
スライスを省略するには、色を変更します'transparent'
:
また、pieStartAngle
チャート135度を回転させるには、pieSliceText
スライスからテキストを削除し、tooltip.trigger
ツールチップを無効にするには:
スライス可視性しきい値
パイスライスを個別にレンダリングするしきい値を設定することができます。, この値は、チャートの一部に対応します(チャート全体の値は1です)。 このしきい値を全体のパーセンテージとして設定するには、目的のパーセンテージを100で割ります(しきい値が20%の場合、値は0.2になります)。
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
このしきい値より小さいスライスは、単一の”その他”スライスに結合され、しきい値より小さいすべてのスライスの結合値を持ちます。
ロード
google.charts.load
パッケージ名は"corechart"
です。,
google.charts.load("current", {packages: });
ビジュアライゼーションのクラス名はgoogle.visualization.PieChart
です。
var visualization = new google.visualization.PieChart(container);
データ形式
行:テーブルの各行はスライスを表します。
列:
設定オプション
名前 | |
---|---|
backgroundColor |
チャートのメイン領域の背景色です。 型:文字列またはオブジェクト
デフォルト:’white’
|
バックグラウンドカラー。stroke |
HTMLの色文字列としてのチャートの境界線の色。 タイプ:文字列
デフォルト:’#666′
|
バックグラウンドカラー。strokeWidth |
枠線の幅をピクセル単位で指定します。デフォルト:0 |
バックグラウンドカラー。fill |
チャートの塗りつぶしの色をHTMLの色文字列として指定します。, 型:string
デフォルト:’white’
|
chartArea |
チャート領域の配置とサイズ(軸と凡例を除くチャート自体が描画される場所)を設定するメンバーを持つオブジェクト。 数値、または%が続く数値の二つの形式がサポートされています。 単純な数値はピクセル単位の値であり、その後に%が続く数値はパーセンテージです。 例: タイプ:オブジェクト
デフォルト:null
|
チャートエリア。backgroundColor |
グラフ領域の背景色です。, 文字列を使用する場合、hex文字列(例:’#fdc’)または英語の色名のいずれかにすることができます。 オブジェクトを使用すると、次のプロパティを提供できます。
タイプ:文字列またはオブジェクト
デフォルト:’white’
|
チャートエリア。左 |
チャートを左の境界線からどのくらい描画するか。, タイプ:数値または文字列
デフォルト:auto
|
チャートエリア。top |
チャートを上の境界線からどのくらい描画するか。 タイプ:数値または文字列
デフォルト:auto
|
チャートエリア。幅 |
チャート領域の幅。 タイプ:数値または文字列
デフォルト:auto
|
チャートエリア。高さ |
チャート領域の高さ。 型:数値または文字列
デフォルト:自動
|
色 |
チャート要素に使用する色。, たとえば、 型:文字列の配列
デフォルト:デフォルトの色
|
enableInteractivity |
チャートがユーザーベースのイベントをスローするか、ユーザーの操作に反応するか。 Falseの場合、チャートは’select’またはその他の対話ベースのイベントをスローせず(ただし、readyまたはerrorイベントをスローします)、hovertextを表示したり、ユーザー入力に応じて変, 型:ブール値
デフォルト:true
|
fontSize |
グラフ内のすべてのテキストのデフォルトのフォントサイズ(ピクセル単位)。 をオーバーライドすることができるこの利用特性のための図です。 型:数値
デフォルト:自動
|
フォント名 |
チャート内のすべてのテキストのデフォルトのフォントフェイスです。 をオーバーライドすることができるこの利用特性のための図です。 型:string
デフォルト:’Arial’
|
forceIFrame |
インラインフレーム内にグラフを描画します。, (IE8では、このオプションは無視され、すべてのIE8グラフはiフレームで描画されます。) タイプ:ブール値
デフォルト:false
|
高さ |
チャートの高さ、ピクセル単位。 型:数値
デフォルト:含まれる要素の高さ
|
is3D |
trueの場合、三次元のチャートを表示します。 型:boolean
デフォルト:false
|
legend |
凡例のさまざまな側面を設定するメンバーを持つオブジェクト。, このオブジェクトのプロパティを指定するには、次のようにオブジェクトリテラル表記法を使用できます。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:object
Default:null
|
legend.アライメント |
凡例のアライメント。 /P>
Start、center、およびendは、凡例のスタイル(垂直または水平)に対する相対値です。 たとえば、’right’の凡例では、’start’と’end’はそれぞれ上部と下部にあり、’top’の凡例では、’start’と’end’はそれぞれ領域の左と右にあります。 デフォルト値は凡例の位置によって異なります。 ‘Bottom’の凡例の場合、デフォルトは’center’で、その他の凡例のデフォルトは’start’です。 タイプ:文字列
デフォルト:自動
|
凡例。ポジション |
凡例のポジション。, /P>
タイプ:文字列
デフォルト:’right’
|
凡例です。maxLines |
凡例内の最大行数。 凡例に行を追加するには、これを一つより大きい数に設定します。, 注:レンダリングされる実際の行数を決定するために使用される正確なロジックは、まだ流動的です。 このオプションは現在、凡例の場合にのみ機能します。位置は’top’です。 タイプ:数値
デフォルト:1
|
凡例。textStyle |
凡例のテキストスタイルを指定するオブジェクト。 オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
型:オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ピエホール |
0から1の場合、ドーナツチャートを表示します。 穴の半径は、 タイプ:数値
デフォルト:0
|
pieSliceBorderColor |
スライスの境界線の色。 チャートが二次元の場合にのみ適用されます。, 型:文字列
デフォルト:’white’
|
pieSliceText |
スライスに表示されるテキストの内容。 次のいずれかになります。
型:文字列
デフォルト:’percentage’
|
pieSliceTextStyle |
スライステキストスタイルを指定するオブジェクトです。, オブジェクトの形式は次のとおりです。 {color: <string>, fontName: <string>, fontSize: <number>}
型:オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
pieStartAngle |
チャートを回転させる角度を度単位で指定します。 デフォルトの タイプ:数値
デフォルト:
0
|
reverseCategories |
trueの場合、スライスを反時計回りに描画します。 デフォルトでは時計回りに描画します。 型:ブール値
デフォルト:false
|
pieResidueSliceColor |
sliceVisibilityThreshold以下のすべてのスライスを保持する組み合わせスライスの色。, 型:string
デフォルト:’#ccc’
|
pieResidueSliceLabel |
sliceVisibilityThreshold以下のすべてのスライスを保持する組み合わせスライスのラベル。 型:string
デフォルト:’Other’
|
スライス |
オブジェクトの配列で、それぞれがパイ内の対応するスライスの形式を記述します。 スライスのデフォルト値を使用するには、空のオブジェクトを指定します(つまり、
オブジェクトの配列を指定することができ、それぞれが指定された順序でスライスに適用されるか、各子がどのスライスに適用されるかを示す数値キーを持つオブジェクトを指定することができます。 slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} Type:オブジェクトの配列、またはネストされたオブジェクトを持つオブジェクト
Default:{}
|
sliceVisibilityThreshold |
パイの小数値で、その下にスライスは個別に表示されません。, このしきい値を超えていないすべてのスライスは、サイズがすべてのサイズの合計である単一の”その他の”スライスに結合されます。 デフォルトでは、半分の程度よりも小さいスライスを個別に表示しないことです。 // Slices less than 25% of the pie will be// combined into an "Other" slice.sliceVisibilityThreshold: .25 タイプ:数
デフォルト:半度(。5/360または1/720または.0014)
|
タイトル |
チャートの上に表示するテキスト。 型:文字列
デフォルト:タイトルなし
|
titleTextStyle |
タイトルテキストスタイルを指定するオブジェクト。, The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip |
An object with members to configure various tooltip elements., このオブジェクトのプロパティを指定するには、次のようにオブジェクトリテラル表記法を使用できます。 {textStyle: {color: '#FF0000'}, showColorCode: true} Type:object
Default:null
|
tooltip。ignoreBounds |
メモ:これはHTMLツールヒントにのみ適用されます。 SVGツールチップでこれを有効にすると、チャートの境界の外側にあるオーバーフローが切り取られます。 見をカスタマイズツールチップコンテンツです。, タイプ:ブール値
デフォルト:false
|
ツールチップ。isHtml |
trueに設定されている場合は、SVGではなくHTMLで描画されたツールヒントを使用します。 見をカスタマイズツールチップコンテンツです。 注意:カスタマイズでHTMLのツールチップコンテンツをカーソルを合わせ、ツールチップ列データの役割をサポートしていない図表バブルを可視化する。 タイプ:ブール値
デフォルト:false
|
ツールチップ。showColorCode |
trueの場合、ツールチップのスライス情報の横に色付きの四角形を表示します。, タイプ:ブール値
デフォルト:false
|
ツールチップ。テキスト |
ユーザーが円スライスの上にカーソルを置いたときに表示する情報。 以下の値がサポートされています。
型:文字列
デフォルト:’both’
|
ツールチップ。,textStyle |
An object that specifies the tooltip text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip.,トリガー |
ツールチップを表示させるユーザーの操作:
型:文字列
デフォルト:’focus’
|
幅 |
チャートの幅をピクセル単位で指定します。, タイプ:番号
デフォルト:含む要素の幅
|
メソッド
メソッド | |
---|---|
draw(data, options) |
グラフを描画します。 チャートは、 戻り値の型:なし
|
getAction(actionID) |
要求された 戻り値の型:object
|
getBoundingBox(id) |
チャート要素
値は、チャートのコンテナに対する相対値です。 呼後の図が描かれています。 戻り値の型:object
|
getChartAreaBoundingBox() |
チャートのコンテンツの左、上、幅、高さを含むオブジェクトを返します(つまり、チャートのコンテンツの左、上、幅、高さを含むオブジェクトを返します)。, ラベルと凡例を除く):
値は、チャートのコンテナに対する相対値です。 呼後の図が描かれています。 戻り値の型:object
|
getChartLayoutInterface() |
チャートとその要素の画面上の配置に関する情報を含むオブジェクトを返します。, 返されたオブジェクトに対して次のメソッドを呼び出すことができます。
チャートが描画された後、これを呼び出します。 戻り値の型:object
|
getHAxisValue(position, optional_axis_index) |
チャートコンテナの左端からのオフセットである 例: チャートが描画された後にこれを呼び出します。 戻り値の型:number
|
getImageURI() |
画像URIとしてシリアル化されたチャートを返します。 チャートが描画された後にこれを呼び出します。 PNGチャートの印刷を参照してください。 戻り値の型:string
|
getSelection() |
選択したチャート図形の配列を返します。 選択可能な図形は、スライスと凡例エントリです。 このグラフでは、任意の時点で一つのエンティティのみを選択できます。, 戻り値の型:選択要素の配列
|
getVAxisValue(position, optional_axis_index) |
チャートコンテナの上端からのオフセットである 例: チャートが描画された後にこれを呼び出します。 戻り値の型:number
|
getXLocation(position, optional_axis_index) |
チャートのコンテナに対する 例: チャートが描画された後にこれを呼び出します。 戻り値の型:number
|
getYLocation(position, optional_axis_index) |
チャートのコンテナに対する 例: チャートが描画された後にこれを呼び出します。 戻り値の型:number
|
removeAction(actionID) |
要求された 戻り値の型:
none
|
setAction(action) |
ユーザーがアクションテキストをクリックしたときに実行されるツールチップアクションを設定します。
チャートの 戻り値の型:
none
|
setSelection() |
指定されたチャートエンティティを選択します。 以前の選択をキャンセルします。 選択可能な図形は、スライスと凡例エントリです。 このグラフでは、一度に一つのエンティティのみを選択できます。 戻り値の型:なし
|
clearChart() |
チャートをクリアし、割り当てられたすべてのリソースを解放します。 戻り値の型:なし
|
イベント
これらのイベントの使用方法の詳細については、”基本的な対話性”、”イベントの処理”、”イベントの
Name | |
---|---|
click |
ユーザーがチャート内をクリックしたときに発生します。, タイトル、データ要素、凡例エントリ、軸、グリッド線、またはラベルがクリックされたときを識別するために使用できます。 プロパティ:targetID
|
error |
チャートをレンダリングしようとしたときにエラーが発生したときに発生します。 プロパティ:id、メッセージ
|
onmouseover |
ユーザーがビジュアルエンティティをマウスオーバーしたときに発生します。 対応するデータテーブル要素の行および列のインデックスを返します。 スライスまたは凡例エントリは、データテーブルの行に関連付けられます(列インデックスはnullです)。, プロパティ:行、列
|
onmouseout |
ユーザーがビジュアルエンティティから離れたときに発生します。 対応するデータテーブル要素の行および列のインデックスを返します。 スライスまたは凡例エントリは、データテーブルの行に関連付けられます(列インデックスはnullです)。 プロパティ:行、列
|
ready |
チャートは外部メソッド呼び出しの準備ができています。, チャートと対話し、描画した後にメソッドを呼び出す場合は、 プロパティ:なし
|
select |
ユーザーがビジュアルエンティティをクリックしたときに発生します。 選択された内容を確認するには、 プロパティ:なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。, どのサーバーにもデータは送信されません。