flex-chart コンポーネントには、子コンポーネントの wijmo.react.chart.analytics.FlexChartTrendLine 、 wijmo.react.chart.analytics.FlexChartMovingAverage 、 wijmo.react.chart.analytics.FlexChartYFunctionSeries 、 wijmo.react.chart.analytics.FlexChartParametricFunctionSeries 、 wijmo.react.chart.analytics.FlexChartWaterfall 、 wijmo.react.chart.analytics.FlexChartBoxWhisker ,、 wijmo.react.chart.analytics.FlexChartErrorBar 、 wijmo.react.chart.analytics.FlexChartBreakEven 、 wijmo.react.chart.animation.FlexChartAnimation 、 wijmo.react.chart.annotation.FlexChartAnnotationLayer 、 wijmo.react.chart.interaction.FlexChartRangeSelector 、 wijmo.react.chart.interaction.FlexChartGestures 、 wijmo.react.chart.FlexChartAxis 、 wijmo.react.chart.FlexChartLegend 、 wijmo.react.chart.FlexChartDataLabel 、 wijmo.react.chart.FlexChartSeries 、 wijmo.react.chart.FlexChartLineMarker および wijmo.react.chart.FlexChartPlotAreaが含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.chart.FlexChart クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

以下の例は、JSXでwijmo.chart.FlexChartコントロールをインスタンス化して初期化する方法を示しています。

<Wj.FlexChart
  itemsSource={ this.state.data }
  bindingX="name"
  header={ this.state.header }
  footer={ this.state.footer }
  axisX={​{ title: this.state.titleX }}
  axisY={​{ title: this.state.titleY }}
  legend={​{ position: this.state.legendPosition }}
  series={[
      { name: 'Sales', binding: 'sales' },
      { name: 'Expenses', binding: 'expenses' },
      { name: 'Downloads', binding: 'downloads', chartType: 'LineSymbols' }
  ]} />

このコードは、itemsSourceプロパティをチャートのデータを含むコレクションに設定し、 bindingXプロパティを使用して、 チャートのX値に使用する dataプロパティの名前を指定します。

headerおよびfooterプロパティを設定してチャートのタイトルを指定し、軸と凡例をカスタマイズします。

最後に、seriesプロパティを、チャートに表示するデータ項目を指定する配列に設定します。