WjFlexChart クラス

FlexChart コントロール用のAngularJSディレクティブ。

wj-flex-chart ディレクティブは、AngularJSアプリケーションにチャートを追加する場合に使用します。ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります。次に例を示します。

<p>FlexChart コントロールの例:</p>
<wj-flex-chart
  style="height:300px"
  items-source="data"
  binding-x="country">
  <wj-flex-chart-axis
    wj-property="axisY"
    major-unit="5000">
  </wj-flex-chart-axis>
  <wj-flex-chart-series
    binding="sales"
    name="Sales">
  </wj-flex-chart-series>
  <wj-flex-chart-series
    binding="expenses"
    name="Expenses">
  </wj-flex-chart-series>
  <wj-flex-chart-series
    binding="downloads"
    name="Downloads"
    chart-type="LineSymbols">
  </wj-flex-chart-series>
</wj-flex-chart>

次の例では、 FlexChart コントロールを作成し、コントローラーによって公開された'data'配列にコントロールをバインドします。チャートには3つの系列オブジェクトがあり、各系列がソース配列に含まれるオブジェクトの1つのプロパティに対応します。この例の最後の系列では、'chart-type'属性を使用して、他の系列オブジェクトで使用されているデフォルトのチャートタイプをオーバーライドしています。

Example

wj-flex-chartディレクティブは以下の属性をサポートしています。

binding: @ チャートのYの値を含むプロパティの名前。これは系列レベルでオーバーライドできます。
binding-x: @ チャートのXの値を含むプロパティの名前。これは系列レベルでオーバーライドできます。
chart-type: @ T系列オブジェクトのレンダリングに使用するデフォルトのチャートタイプ。これは系列レベルでオーバーライドできます。 ChartType を参照してください。
control: = このディレクティブによって作成された FlexChart コントロールへの参照。
footer: @ チャートのフッタに表示するテキスト（プレーンテキスト）。
footer-style: = チャートのフッタに適用するスタイル。
header: @ チャートのヘッダに表示するテキスト（プレーンテキスト）。
header-style: = チャートのヘッダに適用するスタイル。
initialized: & このイベントは、バインディングによるコントロールの初期化が完了した後に発生します。
is-initialized: = バインディングがコントロールを属性値で初期化し終えたかどうかを示す値。
interpolate-nulls: @ データにnull値が存在するときにギャップを補間するか、そのままにするかを示す値。
item-formatter: = データポイントの外観をカスタマイズするフォーマッター関数。
items-source: = チャートの作成に使用されるデータを含む配列または ICollectionView オブジェクト。
legend-toggle: @ 凡例項目をクリックしたときに系列の表示/非表示を切り替えるかどうかを示す値。
options: = 特定のチャートタイプにのみ適用するチャートオプション。詳細については、FlexChart の options を参照してください。
palette: = 各系列の表示に使用されるデフォルト色を含む配列。
plot-margin: = コントロールの端からプロット領域の端までの間隔のピクセル数、またはCSSスタイルのマージン。
rotated: @ X軸が縦、Y軸が横になるように軸を入れ替えるかどうかを示す値。
selection: = 選択されている系列オブジェクト。
selection-mode: @ ユーザーが系列をクリックしたときに何が選択されるかを示す SelectionMode 値。
stacking: @ 系列オブジェクトを積み重ねるか個別にプロットするか、積み重ねる場合はどのように積み重ねるかを示すStacking 値。
symbol-size: @ Scatter、LineSymbols、およびSplineSymbolsチャートでデータポイントのレンダリングに使用されるシンボルのサイズ（ピクセル単位）。これは系列レベルでオーバーライドできます。
tooltip-content: @ ChartTooltip に表示する内容。
got-focus: & FlexChart.gotFocus イベントハンドラ。
lost-focus: & FlexChart.lostFocus イベントハンドラ。
rendering: & FlexChart.rendering イベントハンドラ。
rendered: & FlexChart.rendered イベントハンドラ。
series-visibility-changed: & FlexChart.seriesVisibilityChanged イベントハンドラ。
selection-changed: & FlexChart.selectionChanged イベントハンドラ。

wj-flex-chartディレクティブには、子ディレクティブとして wijmo.angular.chart.WjFlexChartAxis、 wijmo.angular.chart.WjFlexChartSeries、 wijmo.angular.chart.WjFlexChartLegend および wijmo.angular.chart.WjFlexChartDataLabel を含めることができます。

階層

WjFlexChartCore
- WjFlexChart