constructor(element: any, options?: any): FlexChart
FlexChartクラスの新しいインスタンスを初期化します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
A JavaScript object containing initialization data for the control.
データ内のnull値を補間するかどうかを決定する値を取得または設定します。
trueの場合は、隣接するポイントに基づいて、欠けているデータの値が補間されます。falseの場合は、null値のあるポイントで、線や領域に切れ目ができます。
このプロパティのデフォルト値はfalseです。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
チャート要素の外観をカスタマイズするための項目書式設定関数を取得または設定します。
指定されている場合、関数は、チャート上に要素を描画するIRenderEngine 、描画する要素を記述するHitTestInfo パラメータ、および項目のデフォルトの描画を提供する関数の3つのパラメータを受け取る必要があります。
例:
itemFormatter: function (engine, hitTestInfo, defaultRenderer) {
var ht = hitTestInfo,
binding = 'downloads';
// 正しい系列/要素であることを確認します
if (ht.series.binding == binding ht.pointIndex gt; 0
ht.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {
// 現在値と前の値を取得します
var chart = ht.series.chart,
items = chart.collectionView.items,
valNow = items[ht.pointIndex][binding],
valPrev = items[ht.pointIndex - 1][binding];
// 値が増加している場合は行を追加します
if (valNow gt; 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 デモ}
凡例項目をクリックしたときにチャート上の系列の表示/非表示を切り替えるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はfalseです。
各種チャートオプションを取得または設定します。
以下のオプションがサポートされています。
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%ピクセル
}
各系列の表示に使用するデフォルト色の配列を取得または設定します。
この配列には、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;
プロットマージン(ピクセル単位)を取得または設定します。
プロットマージンは、コントロールの端からプロット領域の端までの領域を表します。
デフォルトでは、この値は軸ラベルに必要なスペースに基づいて自動的に計算されますが、コントロール内のプロット領域の位置を精密に制御したい場合(たとえば、複数のチャートコントロールをページ上に整列させるときなど)はこれをオーバーライドできます。
このプロパティは数値またはCSSスタイルのマージン指定に設定できます。例:
// すべての側のプロットマージンを20ピクセルに設定します
chart.plotMargin = 20;
// 上側、右側、下側、左側のプロットマージンを設定します
chart.plotMargin = '10 15 20 25';
// 上側/下側(10px)および左側/右側(20px)のプロットマージンを設定します
chart.plotMargin = '10 20';
ユーザーがチャートをクリックしたときに何が選択されるかを示す列挙値を取得または設定します。
このプロパティのデフォルト値はSelectionMode.Noneです。
系列オブジェクトを積み重ねるかどうかを決定する値と、積み重ねる場合はその方法を取得または設定します。
このプロパティのデフォルト値はStacking.Noneです。
このFlexChart のすべてのSeriesオブジェクトに使用されるシンボルのサイズを取得または設定します。
このプロパティは、各Series オブジェクトのsymbolSizeプロパティによってオーバーライドできます。
このプロパティのデフォルト値は10ピクセルです。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
チャートのTooltip オブジェクトを取得します。
ツールチップの内容は、次のパラメータを含むテンプレートを使用して生成されます。
テンプレートを変更するには、ツールチップのコンテンツプロパティに新しい値を割り当てます。 次に例を示します。
chart.tooltip.content = '<b>{seriesName}</b> ' +
'<img src="resources/{x}.png"/><br/>{y}';
チャートのツールチップを無効にするには、テンプレートを空の文字列に設定します。
tooltip プロパティを使用して、次のように、showDelay やhideDelay などのツールチップパラメータをカスタマイズすることもできます。
chart.tooltip.showDelay = 1000;
詳細とオプションについては、ChartTooltip プロパティを参照してください。
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます(dispose と removeEventListener メソッドを参照してください)。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
dataToPoint(pt: any, y?: number): Point
Point をデータ座標からコントロール座標に変換します。
Point in data coordinates, or X coordinate of a point in data coordinates.
Y coordinate of the point (if the first parameter is a number).
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getTemplate(): string
hitTest(pt: any, y?: number): HitTestInfo
指定したポイントに関する情報を含むHitTestInfo オブジェクトを取得します。
The point to investigate, in window coordinates.
The Y coordinate of the point (if the first parameter is a number).
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript 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; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onItemsSourceChanged(e: EventArgs): void
itemsSourceChanged イベントを発生させます。
onItemsSourceChanging(e: CancelEventArgs): boolean
itemsSourceChanging イベントを発生させます。
CancelEventArgs that contains the event data.
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onRendered(e: RenderEventArgs): void
rendered イベントを発生させます。
The RenderEventArgs object used to render the chart.
onRendering(e: RenderEventArgs): void
rendering イベントを発生させます。
The RenderEventArgs object used to render the chart.
onSelectionChanged(e?: EventArgs): void
selectionChanged イベントを発生させます。
onSeriesVisibilityChanged(e: SeriesEventArgs): void
seriesVisibilityChangedイベントを発生させます。
The SeriesEventArgs object that contains the event data.
pageToControl(pt: any, y?: number): Point
ページ座標をコントロール座標に変換します。
The point of page coordinates or x value of page coordinates.
The y value of page coordinates. Its value should be a number, if pt is a number type. However, the y parameter is optional when pt is Point type.
pointToData(pt: any, y?: number): Point
Point をコントロール座標からチャートデータ座標に変換します。
The point to convert, in control coordinates.
The Y coordinate of the point (if the first parameter is a number).
refresh(fullUpdate?: boolean): void
チャートを更新します。
A value indicating whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
saveImageToDataUrl(format: ImageFormat, done: Function): void
チャートを画像ファイルに保存します。
NOTE: This method does not work in IE browsers. If you require IE support, add the flex-chart.render
module to the page.
The ImageFormat for the exported image.
A function to be called after data url is generated. The function gets passed the data url as its argument.
saveImageToFile(filename: string): void
チャートを画像ファイルに保存します。
NOTE: This method does not work in IE browsers. If you require IE support, add the *wijmo.chart.render* module to the page.
The filename for the exported image file including extension. Supported types are PNG, JPEG and SVG.
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
プログラムコードまたはユーザーがチャートをクリックしたことによって選択が変更された後に発生します。これは、たとえば詳細情報を示すテキストボックスを更新して現在の選択を表示するような場合に役立ちます。
系列の表示/非表示が変更されたときに発生します。たとえば、legendToggleプロパティをtrueに設定したり、ユーザーが凡例をクリックしたときです。
FlexChart コントロールは、データを視覚化する強力で柔軟な方法を提供します。
You can use the FlexChart control to create charts that display data in several formats, including bar, line, symbol, bubble, and others.
To use the FlexChart control, set the itemsSource property to an array containing the data objects, then add one or more Series objects to the series property.
chartType プロパティを使用して、すべての系列でデフォルトとして 使用されるChartType を定義します。series 配列のメンバのchartType プロパティを設定することで、系列ごとにチャートタイプを オーバーライドできます。
{@sample Chart/Overview/purejs デモ}