[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Chart.Flexchart

FlexChart クラス

FlexChart コントロールは、データを視覚化する強力で柔軟な方法を提供します。

FlexChart コントロールを使用して、棒グラフ、折れ線グラフ、シンボルチャート、 バブルチャートなどのさまざまな形式でデータを表示するチャートを作成できます。

FlexChart コントロールを使用するには、FlexChart.itemsSource プロパティに データオブジェクトから成る配列を設定してから、1つ以上のSeries オブジェクトを FlexChart.series プロパティに追加します。

FlexChart.chartType プロパティを使用して、すべての系列でデフォルトとして 使用されるChartType を定義します。FlexChart.series 配列のメンバのSeries.chartType プロパティを設定することで、系列ごとにチャートタイプを オーバーライドできます。

Example

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new FlexChart(element: any, options?: any): FlexChart

  • FlexChart クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    • オプション options: any

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

    戻り値 FlexChart

プロパティ

axes

axes: ObservableArray

Axis オブジェクトのコレクションを取得します。

axisX

axisX: Axis

メインのX軸を取得または設定します。

axisY

axisY: Axis

メインのY軸を取得または設定します。

binding

binding: string

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

bindingX

bindingX: string

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

chartType

chartType: ChartType

作成するチャートのタイプを取得または設定します。

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

collectionView

collectionView: ICollectionView

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

dataLabel

dataLabel: DataLabel

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

footer: string

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

footerStyle

footerStyle: any

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

header: string

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

headerStyle

headerStyle: any

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

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

interpolateNulls

interpolateNulls: boolean

データ内のnull値を補間するかどうかを決定する値を取得または設定します。

trueの場合は、隣接するポイントに基づいて、欠けているデータの値が補間されます。 falseの場合は、null値のあるポイントで、線や領域に切れ目ができます。

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

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

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();
}

{@sample: Chart/LineArea/CustomLineSegments/purejs Example}

itemsSource

itemsSource: any

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

legend

legend: Legend

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

legendToggle

legendToggle: boolean

凡例項目をクリックしたときにチャート上の系列の表示/非表示を切り替えるかどうかを示す値を取得または設定します。

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

options

options: any

さまざまなチャートオプションを取得または設定します。

以下のオプションがサポートされます。

bubble.maxSize：バブルチャートのシンボルの最大サイズ を指定します。デフォルト値は30ピクセルです。

bubble.minSize：バブルチャートのシンボルの最小サイズ を指定します。デフォルト値は5ピクセルです。

chart.options = {
  bubble: { minSize: 5, maxSize: 30 }
}

funnel.neckWidth：ファンネルグラフのネックの幅をパーセント値で指定します。 デフォルト値は0.2です。

funnel.neckHeight：ファンネルグラフのネックの高さをパーセント値で指定します。 デフォルト値は0です。

funnel.type：ファンネルグラフのタイプを指定します。これは、'rectangle'または'default'である必要があります。 タイプがrectangleに設定されている場合、neckWidthとneckHeightは機能しません。

chart.options = {
  funnel: { neckWidth: 0.3, neckHeight: 0.3, type: 'rectangle' }
}

groupWidth：縦棒グラフのグループ幅または 横棒グラフのグループ高さを指定します。グループ幅は、ピクセル単位 または有効なスペースに対するパーセント値で指定できます。デフォルト値は'70%'です。

chart.options = {
  groupWidth : 50; // 50ピクセル
}
chart.options = {
  groupWidth : '100%'; // 100%ピクセル
}

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;

plotAreas

plotAreas: PlotAreaCollection

PlotArea オブジェクトのコレクションを取得します。

plotMargin

plotMargin: any

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

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

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

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

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

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

rotated

rotated: boolean

Xが垂直、Yが水平になるように軸を反転するかどうかを示す値を

取得または設定します。

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

selection

selection: SeriesBase

選択されているチャート系列を取得または設定します。

selectionMode

selectionMode: SelectionMode

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

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

series

series: ObservableArray

Series オブジェクトのコレクションを取得します。

stacking

stacking: Stacking

系列オブジェクトを積み重ねるかどうかを決定する値と、積み重ねる場合はその方法を取得または設定します。

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

symbolSize

symbolSize: number

この!see:FlexChart のすべてのSeriesオブジェクトに使用されるシンボルのサイズを取得または設定します。

このプロパティは、各Series オブジェクトのsymbolSizeプロパティによってオーバーライドできます。

このプロパティのデフォルト値は10 ピクセルです。

tooltip

tooltip: ChartTooltip

チャートのTooltip オブジェクトを取得します。

ツールチップの内容は、次のパラメータを含むテンプレートを使用して生成されます。

  • propertyName: このポイントによって表されるデータオブジェクトの任意のプロパティ。
  • seriesName: データポイントを含む系列の名前（FlexChartのみ）。
  • pointIndex: データポイントのインデックス。
  • value: データポイントの値 （FlexChart の場合はy値、FlexPie の場合は項目値）。
  • x: データポイントのx値（FlexChartのみ）。
  • y: データポイントのy値（FlexChartのみ）。
  • name: データポイントの名前 （FlexChart の場合はx値、FlexPie の場合は凡例エントリ）。

テンプレートを変更するには、ツールチップのコンテンツプロパティに新しい値を割り当てます。 次に例を示します。

chart.tooltip.content = '<b>{seriesName}</b> ' +
   '<img src="resources/{x}.png"/><br/>{y}';

チャートのツールチップを無効にできます。それには、テンプレートを空の文字列に設定します。

tooltip プロパティを使用して、次のように、Tooltip.showDelay やTooltip.hideDelay などの ツールチップパラメータをカスタマイズすることもできます。

chart.tooltip.showDelay = 1000;

詳細とオプションについては、ChartTooltip プロパティを参照してください。

メソッド

addEventListener

  • addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void

  • このControl が所有する要素にイベントリスナーを追加します。

    コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener ) メソッドを参照してください）。

    イベントリスナーを削除しないと、メモリリークが発生する可能があります。

    デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。

    passive　イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。

    引数

    • target: EventTarget

      イベントのターゲット要素。

    • type: string

      イベントを指定する文字列。

    • fn: any

      イベントが発生したときに実行する関数。

    • オプション capture: boolean

      リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。

    • オプション passive: boolean

      ハンドラーが preventDefault() を呼び出さないことを示します。

    戻り値 void

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出され、 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。 以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', template, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    引数

    • classNames: string

      コントロールのホスト要素に追加するクラスの名前。

    • template: string

      コントロールのテンプレートを定義するHTML文字列。

    • parts: Object

      パーツ変数とその名前のディクショナリー。

    • オプション namePart: string

      ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    戻り値 HTMLElement

beginUpdate

  • beginUpdate(): void

containsFocus

  • containsFocus(): boolean

  • このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。

    戻り値 boolean

dataToPoint

  • dataToPoint(pt: any, y?: number): Point

  • Point をデータ座標からコントロール座標に変換します。

    引数

    • pt: any

      データ座標のPoint 、またはデータ座標のポイントのX座標。

    • オプション y: number

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

    戻り値 Point

    The Point in control coordinates.

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

dispose

  • dispose(): void

  • ホスト要素との関連付けを解除することによってコントロールを破棄します。

    dispose メソッドは、addEventListener メソッドによって 追加されたイベントリスナーを自動的に削除します。

    コントロールを動的に作成および削除するアプリケーションでは、 dispose メソッドを呼び出すことが重要です。 コントロールを破棄しないと、 メモリリークが発生する可能があります。.

    戻り値 void

endUpdate

  • endUpdate(): void

focus

  • focus(): void

  • このコントロールにフォーカスを設定します。

    戻り値 void

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

hitTest

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

    引数

    • pt: any

      調べるポイント（ウィンドウ座標単位）。

    • オプション y: number

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

    戻り値 HitTestInfo

    A HitTestInfo object with information about the point.

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 }
  ]
});
// これは以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

onGotFocus

onItemsSourceChanged

onItemsSourceChanging

onRefreshed

onRefreshing

onRendered

onRendering

onSelectionChanged

onSeriesVisibilityChanged

pageToControl

  • pageToControl(pt: any, y?: number): Point

  • ページ座標をコントロール座標に変換します。

    引数

    • pt: any

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

    • オプション y: number

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

    戻り値 Point

pointToData

  • pointToData(pt: any, y?: number): Point

  • Point をコントロール座標からチャートデータ座標に変換します。

    引数

    • pt: any

      変換するポイント（コントロール座標単位）。

    • オプション y: number

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

    戻り値 Point

    The point in chart data coordinates.

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

refresh

  • refresh(fullUpdate?: boolean): void

  • チャートを更新します。

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます。

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

    The number of listeners removed.

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

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新する。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

gotFocus

gotFocus: Event<Control, EventArgs>

コントロールがフォーカスを取得したときに発生します。

itemsSourceChanged

itemsSourceChanged: Event<FlexChartBase, EventArgs>

チャートが新しい項目ソースにバインドされた後に発生します。

itemsSourceChanging

itemsSourceChanging: Event<FlexChartBase, CancelEventArgs>

チャートが新しい項目ソースにバインドされる前に発生します。

lostFocus

lostFocus: Event<Control, EventArgs>

コントロールがフォーカスを失ったときに発生します。

refreshed

refreshed: Event<Control, EventArgs>

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event<Control, EventArgs>

コントロールが内容を更新する直前に発生します。

rendered

rendered: Event<FlexChartBase, RenderEventArgs>

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

rendering

rendering: Event<FlexChartBase, RenderEventArgs>

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

selectionChanged

selectionChanged: Event<FlexChartBase, EventArgs>

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

seriesVisibilityChanged

seriesVisibilityChanged: Event<FlexChartCore, SeriesEventArgs>

系列の表示/非表示が変更されたときに発生します。たとえば、legendToggleプロパティをtrueに設定したり、ユーザーが凡例をクリックしたときです。