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 を含めることができます。