Welcome to Our Website

視覚化:円グラフ

概要

SVGまたはVMLを使用してブラウザ内でレンダリングされる円グラフ。 表示ツールチップが浮上スライス.,

Example

3D円グラフの作成

is3Dオプションをtrueに設定すると、ピーグラフは三次元のように描画されます。

is3Disfalseデフォルトでは、ここでは明示的にtrue:

ドーナツチャートを作成する

ドーナツチャートは、中央に穴がある円グラフです。, pieHoleオプションでドーナツチャートを作成できます。

pieHoleオプションは、穴とチャートの間の半径の比に対応する0と1の間の数に設定する必要があります。 0.4と0.6の間の数字は、ほとんどのチャートで最高に見えます。1以上の値は無視され、0の値はピエホールを完全にシャットダウンします。

pieHoleis3Dオプションを組み合わせることはできません。pieHoleは無視されます。,

Google Chartsは、ラベルをできるだけスライスの中心の近くに配置しようとすることに注意してください。 あなたはjustoneスライスとドーナツチャートを持っている場合は、スライスの中心がドーナツの穴に落ちることがあります。 この場合、ラベルの色を変更します。

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

円グラフの回転

デフォルトでは、円グラフは最初のスライスの左端から始まります。 これを変更できますpieStartAngleオプション:

ここでは、pieStartAngle: 100オプションでチャートを時計回りに100度回転させます。, (このようにして選定されたこparticularangleが、”イタリアン”ラベルが部屋になります。)

スライスの展開

円グラフの残りの部分から円グラフを分離するには、offsetslicesオプションのプロパティを使用します。

スライスを分離するには、slicesオブジェクトを作成し、適切なスライス番号をoffset0と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

チャートのメイン領域の背景色です。 'red'または'#00cc00'のような単純なHTMLカラー文字列、または次のプロパティを持つオブジェクトのいずれかを指定できます。,

型:文字列またはオブジェクト
デフォルト:’white’
バックグラウンドカラー。stroke

HTMLの色文字列としてのチャートの境界線の色。

タイプ:文字列
デフォルト:’#666′
バックグラウンドカラー。strokeWidth

枠線の幅をピクセル単位で指定します。デフォルト:0

バックグラウンドカラー。fill

チャートの塗りつぶしの色をHTMLの色文字列として指定します。,

型:string
デフォルト:’white’
chartArea

チャート領域の配置とサイズ(軸と凡例を除くチャート自体が描画される場所)を設定するメンバーを持つオブジェクト。 数値、または%が続く数値の二つの形式がサポートされています。 単純な数値はピクセル単位の値であり、その後に%が続く数値はパーセンテージです。 例:chartArea:{left:20,top:0,width:'50%',height:'75%'}

タイプ:オブジェクト
デフォルト:null
チャートエリア。backgroundColor
グラフ領域の背景色です。, 文字列を使用する場合、hex文字列(例:’#fdc’)または英語の色名のいずれかにすることができます。 オブジェクトを使用すると、次のプロパティを提供できます。
  • stroke:hex文字列または英語の色名として提供される色。
  • strokeWidth:指定されている場合、指定された幅のチャート領域の周りに境界線を描画します(strokeの色)。
タイプ:文字列またはオブジェクト
デフォルト:’white’
チャートエリア。左

チャートを左の境界線からどのくらい描画するか。,

タイプ:数値または文字列
デフォルト:auto
チャートエリア。top

チャートを上の境界線からどのくらい描画するか。

タイプ:数値または文字列
デフォルト:auto
チャートエリア。幅

チャート領域の幅。

タイプ:数値または文字列
デフォルト:auto
チャートエリア。高さ

チャート領域の高さ。

型:数値または文字列
デフォルト:自動

チャート要素に使用する色。, たとえば、colors:のように、各要素がHTMLの色文字列である文字列の配列です。

型:文字列の配列
デフォルト:デフォルトの色
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’-凡例に割り当てられた領域の末尾に揃えます。,

Start、center、およびendは、凡例のスタイル(垂直または水平)に対する相対値です。 たとえば、’right’の凡例では、’start’と’end’はそれぞれ上部と下部にあり、’top’の凡例では、’start’と’end’はそれぞれ領域の左と右にあります。

デフォルト値は凡例の位置によって異なります。 ‘Bottom’の凡例の場合、デフォルトは’center’で、その他の凡例のデフォルトは’start’です。

タイプ:文字列
デフォルト:自動
凡例。ポジション

凡例のポジション。, /P>

  • ‘bottom’-チャートの下に凡例を表示します。
  • ‘labeled’-スライスとデータ値を結ぶ線を描画します。
  • ‘left’-チャートの左側の凡例を表示します。
  • ‘none’-凡例を表示しません。
  • ‘right’-グラフの凡例を右側に表示します。
  • ‘top’-チャートの上に凡例を表示します。
タイプ:文字列
デフォルト:’right’
凡例です。maxLines

凡例内の最大行数。 凡例に行を追加するには、これを一つより大きい数に設定します。, 注:レンダリングされる実際の行数を決定するために使用される正確なロジックは、まだ流動的です。

このオプションは現在、凡例の場合にのみ機能します。位置は’top’です。

タイプ:数値
デフォルト:1
凡例。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>}
ピエホール

0から1の場合、ドーナツチャートを表示します。 穴の半径は、numberチャートの半径を掛けたものです。

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

スライスの境界線の色。 チャートが二次元の場合にのみ適用されます。,

型:文字列
デフォルト:’white’
pieSliceText

スライスに表示されるテキストの内容。 次のいずれかになります。

  • ‘percentage’-合計からのスライスサイズの割合。
  • ‘value’-スライスの定量値。
  • ‘label’-スライスの名前。
  • ‘none’-テキストは表示されません。
型:文字列
デフォルト:’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の場合、スライスを反時計回りに描画します。 デフォルトでは時計回りに描画します。

型:ブール値
デフォルト:false
pieResidueSliceColor

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

型:string
デフォルト:’#ccc’
pieResidueSliceLabel

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

型:string
デフォルト:’Other’
スライス

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

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

オブジェクトの配列を指定することができ、それぞれが指定された順序でスライスに適用されるか、各子がどのスライスに適用されるかを示す数値キーを持つオブジェクトを指定することができます。

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 color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

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

trueに設定されている場合、ツールチップの描画をすべての辺のチャートの境界の外側に流すことができます。

メモ:これはHTMLツールヒントにのみ適用されます。 SVGツールチップでこれを有効にすると、チャートの境界の外側にあるオーバーフローが切り取られます。 見をカスタマイズツールチップコンテンツです。,

タイプ:ブール値
デフォルト:false
ツールチップ。isHtml

trueに設定されている場合は、SVGではなくHTMLで描画されたツールヒントを使用します。 見をカスタマイズツールチップコンテンツです。

注意:カスタマイズでHTMLのツールチップコンテンツをカーソルを合わせ、ツールチップ列データの役割をサポートしていない図表バブルを可視化する。

タイプ:ブール値
デフォルト:false
ツールチップ。showColorCode

trueの場合、ツールチップのスライス情報の横に色付きの四角形を表示します。,

タイプ:ブール値
デフォルト:false
ツールチップ。テキスト

ユーザーが円スライスの上にカーソルを置いたときに表示する情報。 以下の値がサポートされています。

  • ‘both’-スライスの絶対値と全体のパーセンテージの両方を表示します。
  • ‘value’-スライスの絶対値のみを表示します。
  • ‘percentage’-スライスで表される全体のパーセンテージのみを表示します。
型:文字列
デフォルト:’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 color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.,トリガー

ツールチップを表示させるユーザーの操作:

  • ‘focus’-ユーザーが要素の上にカーソルを置くと、ツールチップが表示されます。
  • ‘none’-ツールチップは表示されません。
  • ‘selection’-ユーザーが要素を選択するとツールチップが表示されます。
型:文字列
デフォルト:’focus’

チャートの幅をピクセル単位で指定します。,

タイプ:番号
デフォルト:含む要素の幅

メソッド

メソッド
draw(data, options)

グラフを描画します。 チャートは、readyイベントが発生した後にのみ、さらなるメソッド呼び出しを受け入れます。 Extended description.

戻り値の型:なし
getAction(actionID)

要求されたactionIDを持つツールヒントアクションオブジェクトを返します。,

戻り値の型:object
getBoundingBox(id)

チャート要素idの左、上、幅、および高さを含むオブジェクトを返します。, idの形式はまだ文書化されていません(イベントハンドラの戻り値です)が、いくつかの例があります。

var cli = chart.getChartLayoutInterface();
チャート領域の高さcli.getBoundingBox('chartarea').height棒グラフまたは縦棒グラフの最初のシリーズの第三のバーの幅cli.getBoundingBox('bar#0#2').width円グラフの第五のくさびのバウンディングボックスcli.getBoundingBox('slice#4')垂直(例えば、縦)グラフのグラフデータのバウンディングボックス:cli.getBoundingBox('vAxis#0#gridline'),,bar)チャート:cli.getBoundingBox('hAxis#0#gridline')

値は、チャートのコンテナに対する相対値です。 呼後の図が描かれています。

戻り値の型:object
getChartAreaBoundingBox()

チャートのコンテンツの左、上、幅、高さを含むオブジェクトを返します(つまり、チャートのコンテンツの左、上、幅、高さを含むオブジェクトを返します)。, ラベルと凡例を除く):

var cli = chart.getChartLayoutInterface();
cli.getChartAreaBoundingBox().leftcli.getChartAreaBoundingBox().topcli.getChartAreaBoundingBox().heightcli.getChartAreaBoundingBox().width

値は、チャートのコンテナに対する相対値です。 呼後の図が描かれています。

戻り値の型:object
getChartLayoutInterface()

チャートとその要素の画面上の配置に関する情報を含むオブジェクトを返します。,

返されたオブジェクトに対して次のメソッドを呼び出すことができます。

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

チャートが描画された後、これを呼び出します。

戻り値の型:object
getHAxisValue(position, optional_axis_index)

チャートコンテナの左端からのオフセットであるpositionの論理水平値を返します。 負である場合もあります。,

例:chart.getChartLayoutInterface().getHAxisValue(400)

チャートが描画された後にこれを呼び出します。

戻り値の型:number
getImageURI()

画像URIとしてシリアル化されたチャートを返します。

チャートが描画された後にこれを呼び出します。

PNGチャートの印刷を参照してください。

戻り値の型:string
getSelection()

選択したチャート図形の配列を返します。 選択可能な図形は、スライスと凡例エントリです。 このグラフでは、任意の時点で一つのエンティティのみを選択できます。, Extended description.

戻り値の型:選択要素の配列
getVAxisValue(position, optional_axis_index)

チャートコンテナの上端からのオフセットであるpositionの論理垂直値を返します。 負である場合もあります。

例:chart.getChartLayoutInterface().getVAxisValue(300)

チャートが描画された後にこれを呼び出します。

戻り値の型:number
getXLocation(position, optional_axis_index)

チャートのコンテナに対するpositionの画面のx座標を返します。,

例:chart.getChartLayoutInterface().getXLocation(400)

チャートが描画された後にこれを呼び出します。

戻り値の型:number
getYLocation(position, optional_axis_index)

チャートのコンテナに対するpositionの画面のy座標を返します。

例:chart.getChartLayoutInterface().getYLocation(300)

チャートが描画された後にこれを呼び出します。

戻り値の型:number
removeAction(actionID)

要求されたactionIDを持つツールヒントアクションをチャートから削除します。,

戻り値の型:none
setAction(action)

ユーザーがアクションテキストをクリックしたときに実行されるツールチップアクションを設定します。

setActionメソッドは、アクションパラメータとしてオブジェクトを受け取ります。 このオブジェクトには、3つのプロパティを指定する必要があります。id—設定されているアクションのID、text—アクションのツールチップに表示されるテキスト、action—ユーザーがアクションテキストをクリックしたときに実行される関数。,

チャートのdraw()メソッドを呼び出す前に、すべてのツールヒントアクションを設定する必要があります。 拡張された説明。

戻り値の型:none
setSelection()

指定されたチャートエンティティを選択します。 以前の選択をキャンセルします。 選択可能な図形は、スライスと凡例エントリです。 このグラフでは、一度に一つのエンティティのみを選択できます。 Extended description.,

戻り値の型:なし
clearChart()

チャートをクリアし、割り当てられたすべてのリソースを解放します。

戻り値の型:なし

イベント

これらのイベントの使用方法の詳細については、”基本的な対話性”、”イベントの処理”、”イベントの

Name
click

ユーザーがチャート内をクリックしたときに発生します。, タイトル、データ要素、凡例エントリ、軸、グリッド線、またはラベルがクリックされたときを識別するために使用できます。

プロパティ:targetID
error

チャートをレンダリングしようとしたときにエラーが発生したときに発生します。

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

ユーザーがビジュアルエンティティをマウスオーバーしたときに発生します。 対応するデータテーブル要素の行および列のインデックスを返します。 スライスまたは凡例エントリは、データテーブルの行に関連付けられます(列インデックスはnullです)。,

プロパティ:行、列
onmouseout

ユーザーがビジュアルエンティティから離れたときに発生します。 対応するデータテーブル要素の行および列のインデックスを返します。 スライスまたは凡例エントリは、データテーブルの行に関連付けられます(列インデックスはnullです)。

プロパティ:行、列
ready

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

プロパティ:なし
select

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

プロパティ:なし

データポリシー

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です