[]
        
(Showing Draft Content)

Wijmo_Chart.Flexpie

FlexPie クラス

FlexPie コントロールは、選択可能なセグメントを持つ円グラフおよびドーナツグラフを提供します。

FlexPie コントロールを使用するには、 FlexPie.itemsSource プロパティにデータから成る配列を設定し、 FlexPie.bindingFlexPie.bindingName プロパティを使用して、 項目値と項目名を含むプロパティを設定します。

階層

コンストラクタ

constructor

  • new FlexPie(element: any, options?: any): FlexPie
  • FlexPie クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      このコントロールをホストするDOM要素またはホスト要素のセレクタ('#theCtrl'など)。

    • オプション options: any

      コントロールの初期化データを含むJavascriptオブジェクト。

    戻り値 FlexPie

プロパティ

binding

binding: string

チャート値を含むプロパティの名前を取得または設定します。

bindingName

bindingName: string

データ項目の名前を含むプロパティの名前を取得または設定します。

collectionView

collectionView: ICollectionView

チャートデータを含むICollectionView オブジェクトを取得します。

dataLabel

dataLabel: PieDataLabel

ポイントのデータラベルを取得または設定します。

footer: string

チャートのフッタに表示されるテキストを取得または設定します。

footerStyle

footerStyle: any

チャートのフッタスタイルを取得または設定します。

header: string

チャートのヘッダに表示されるテキストを取得または設定します。

headerStyle

headerStyle: any

チャートのヘッダスタイルを取得または設定します。

innerRadius

innerRadius: number

パイの内側半径のサイズを取得または設定します。

内側半径はパイ半径に対する割合として測定されます。

このプロパティのデフォルト値はゼロです(つまり、円グラフになります)。このプロパティをゼロより大きい値に設定すると、円グラフの中央に穴が開きます(これをドーナツグラフと呼びます)。

このプロパティのデフォルト値は 0 です。

isAnimated

isAnimated: boolean

項目が選択されたときにアニメーションを使用するかどうかを示す値を取得または設定します。

selectedItemPosition プロパティおよびselectionMode プロパティも参照してください。

このプロパティのデフォルト値は falseです。

itemFormatter

itemFormatter: Function

チャート要素の外観をカスタマイズするための項目書式設定関数を取得または設定します。

指定されている場合、関数は、チャート上に要素を描画するIRenderEngine 、 描画する要素を記述するHitTestInfo パラメータ、 および項目のデフォルトの描画を提供する関数の3つのパラメータを受け取る必要があります。

次に例を示しています。v

itemFormatter: function (engine, hitTestInfo, defaultRenderer) {
  var ht = hitTestInfo,
      binding = 'downloads';

  // 正しい系列/要素であることを確認します
  if (ht.series.binding == binding && ht.pointIndex > 0 &&
      ht.chartElement == ChartElement.SeriesSymbol) {

    // 現在値と前の値を取得します
    var chart = ht.series.chart,
        items = chart.collectionView.items,
        valNow = items[ht.pointIndex][binding],
        valPrev = items[ht.pointIndex - 1][binding];

    // 値が増加している場合は行を追加します
    if (valNow > valPrev) {
      var pt1 = chart.dataToPoint(ht.pointIndex, valNow),
          pt2 = chart.dataToPoint(ht.pointIndex - 1, valPrev);
      engine.drawLine(pt1.x, pt1.y, pt2.x, pt2.y, null, {
        stroke: 'gold',
        strokeWidth: 6
      });
    }
  }

  // 要素を通常通りに描画します
  defaultRenderer();
}

itemsSource

itemsSource: any

チャートの作成に使用されるデータを含む配列またはICollectionView オブジェクトを取得または設定します。

legend

legend: Legend

チャートの凡例を取得または設定します。

offset

offset: number

スライスのパイ中心からのオフセットを取得または設定します。

オフセットはパイ半径に対する割合として測定されます。

このプロパティのデフォルト値は 0です。

palette

palette: string[]

系列の表示に使用されるデフォルトの色の配列を取得または設定します。

配列にはCSSの色を表す文字列が含まれています。 次に例を示します。

// 名前で指定された色を使用します
chart.palette = ['red', 'green', 'blue'];
// または、RGBA値で指定された色を使用します
chart.palette = [
  'rgba(255,0,0,1)',
  'rgba(255,0,0,0.8)',
  'rgba(255,0,0,0.6)',
  'rgba(255,0,0,0.4)'];

Palettes クラスにある事前定義されたパレットのセットを使用できます。次に例を示します。

chart.palette = Palettes.coral;

plotMargin

plotMargin: any

プロットマージン(ピクセル単位)を取得または設定します。

プロットマージンは、コントロールの端からプロット領域の端までの領域を表します。

デフォルトでは、この値は軸ラベルに必要なスペースに基づいて自動的に計算されますが、 コントロール内のプロット領域の位置を精密に制御したい場合(たとえば、 複数のチャートコントロールをページ上に整列させるときなど)はこれをオーバーライドできます。

このプロパティは数値またはCSSスタイルのマージン指定に設定できます。例:

// すべての側のプロットマージンを20ピクセルに設定します
chart.plotMargin = 20;
// 上側、右側、下側、左側のプロットマージンを設定します
chart.plotMargin = '10 15 20 25';
// 上側/下側(10px)および左側/右側(20px)のプロットマージンを設定します
chart.plotMargin = '10 20';

reversed

reversed: boolean

角度を反転(反時計回り)するかどうかを決定する値を取得または設定します。

デフォルト値はfalseです。この場合、角度は時計回りに測定されます。

このプロパティのデフォルト値は false.です。

selectedIndex

selectedIndex: number

選択されたスライスのインデックスを取得または設定します。

selectedItemOffset

selectedItemOffset: number

選択されたスライスのパイ中心からのオフセットを取得または設定します。

オフセットはパイ半径に対する割合として測定されます。

このプロパティのデフォルト値は 0です。

selectedItemPosition

selectedItemPosition: Position

選択されたスライスの位置を取得または設定します。

このプロパティを'None'以外の値に設定すると、スライスを選択したときに円グラフが回転します。

円グラフをクリックしたときにスライスが選択されるようにするには、 selectionMode プロパティを「Point」に設定する必要があります。

このプロパティのデフォルト値は Position.Noneです。

selectionMode

selectionMode: SelectionMode

ユーザーがチャートをクリックしたときに何が選択されるかを示す列挙値を取得または設定します。

このプロパティのデフォルト値はSelectionMode.Noneです。

startAngle

startAngle: number

パイスライスの開始角度(度単位)を取得または設定します。

ゲージの掃引角度を取得または設定します。 角度は9時の位置から時計回りに度単位で測定されます。

このプロパティのデフォルト値は 0.です。

titles

titles: string[]

円のタイトルを取得または設定します。

binding で複数のプロパティが指定されている場合、タイトルは各円グラフの上部に表示されます。 プロパティが設定されていない(未定義)場合、プロパティ名は円グラフのタイトルとして使用されます。

tooltip

tooltip: ChartTooltip

チャートのTooltip を取得します。

メソッド

hitTest

  • 指定したポイントに関する情報を含む HitTestInfo オブジェクトを取得します。

    引数

    • pt: any

      調べるポイント(ウィンドウ座標単位)。

    • オプション y: number

      ポイントのY座標(最初のパラメーターが数値の場合)。

    戻り値 HitTestInfo

    A HitTestInfo object containing information about the point.

onRendered

onRendering

onSelectionChanged

pageToControl

  • pageToControl(pt: any, y?: number): Point
  • ページ座標をコントロール座標に変換します。

    引数

    • pt: any

      ページ座標のポイントまたはページ座標のx値。

    • オプション y: number

      ページ座標のy値。 ptが数値型の場合、値は数値である必要があります。 ただし、ptがPoint型の場合は、yパラメータはオプションになります。

    戻り値 Point

refresh

  • refresh(fullUpdate?: boolean): void
  • チャートを更新します。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうかを示す値。

    戻り値 void

saveImageToDataUrl

  • saveImageToDataUrl(format: ImageFormat, done: Function): void
  • チャートを画像ファイルに保存します。

    このメソッドはIEブラウザでは機能しないことにご注意ください。 IEのサポートが必要な場合は、 flex-chart.render モジュールをページに追加してください。

    引数

    • format: ImageFormat

      エクスポートされる画像のImageFormat

    • done: Function

      データURLの生成後に呼び出される関数。この関数は、引数としてデータURLに渡されます。

    戻り値 void

saveImageToFile

  • saveImageToFile(filename: string): void
  • チャートを画像ファイルに保存します。

    このメソッドはIEブラウザでは機能しないことにご注意ください。 IEのサポートが必要な場合は、 flex-chart.render モジュールをページに追加してください。

    引数

    • filename: string

      拡張子を含む、エクスポートされる画像ファイルの名前。サポートされているタイプは、PNG、JPEG およびSVGです。

    戻り値 void

イベント

rendered

rendered: Event

チャートのレンダリングが完了した後に発生します。

rendering

rendering: Event

チャートデータのレンダリングが開始される前に発生します。

selectionChanged

selectionChanged: Event

プログラムコードまたはユーザーがチャートをクリックしたことによって選択が変更された後に発生します。 これは、たとえば詳細情報を示すテキストボックスを更新して現在の 選択を表示するような場合に役立ちます。