デモ
ヘルプ
APIリファレンス
その他のサンプル
トライアル版
Wijmo
Chart
5.20231.888
wijmo.chart Class FlexChart Wijmo API クラス

FlexChart クラス

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

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

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

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

デモ

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

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

footer: string

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

footerStyle

footerStyle: any

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

header

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つのパラメータを受け取る必要があります。

次に例を示しています。

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 デモ}

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';

renderEngine

renderEngine: IRenderEngine

チャートのレンダリングエンジンを取得または設定します。

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

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

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

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

tabOrder

tabOrder: number

コントロールに関連付けられたtabindex属性の値を取得または設定します。

tabindex属性値は、コントロールのホストHTML要素で指定することで、 Wijmoコントロールに対して静的に定義できます。 ただし、Wijmoコントロールは複雑な構造であり、コントロールが正しく機能できるように、属性値を内部要素に伝達する必要があるため、 この値をアプリケーションのライフサイクルの後半で変更することはできません。

そのため、コントロールのtabindexを動的に読み取ったり変更したりするには、このプロパティを使用して行う必要があります。

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', templateString, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    @param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    引数

    • classNames: string
    • template: string
    • 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

    コントロール座標内のPoint。

deferUpdate

  • deferUpdate(fn: Function): void

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

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

    引数

    • fn: Function

      実行する関数。

    戻り値 void

dispose

  • dispose(): void

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

    戻り値 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

    ポイントに関する情報を含むHitTestInfoオブジェクト。

invalidate

  • invalidate(fullUpdate?: boolean): void

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

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

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

    引数

    • v: Object

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

    戻り値 boolean

onGotFocus

onInvalidInput

  • invalidInput イベントを発生させます。

    イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。

    引数

    戻り値 boolean

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

    チャートのデータ座標のポイント。

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

    削除されたリスナーの数。

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のサポートが必要な場合は、 wijmo.chart.render モジュールをページに追加してください。

    引数

    • filename: string

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

    戻り値 void

saveSvgToDataUrl

  • saveSvgToDataUrl(done: Function, embedCss?: boolean): void

  • チャートを SVG イメージとしてデータ URL に保存します。

    引数

    • done: Function

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

    • オプション embedCss: boolean

      SVG 画像に CSS スタイルを含めるかどうか。

    戻り値 void

saveSvgToFile

  • saveSvgToFile(filename: string, embedCss?: boolean): void

  • チャートをSVG画像ファイルに保存します。

    引数

    • filename: string

      拡張子を含む、エクスポートされる画像ファイルの名前。

    • オプション embedCss: boolean

      SVG 画像に CSS スタイルを含めるかどうか。

    戻り値 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>

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

invalidInput

invalidInput: Event<Control, CancelEventArgs>

無効な文字が入力されたときに発生します。

ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。

イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。

イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。

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に設定したり、ユーザーが凡例をクリックしたときです。