5.20221.842
wijmo.react.chart Class FlexChart Wijmo API クラス

FlexChart クラス

wijmo.chart.FlexChart コントロールに対応するReactコンポーネント。

flex-chart コンポーネントには、子コンポーネントの wijmo.react.chart.analytics.FlexChartTrendLinewijmo.react.chart.analytics.FlexChartMovingAveragewijmo.react.chart.analytics.FlexChartYFunctionSerieswijmo.react.chart.analytics.FlexChartParametricFunctionSerieswijmo.react.chart.analytics.FlexChartWaterfallwijmo.react.chart.analytics.FlexChartBoxWhisker ,、 wijmo.react.chart.analytics.FlexChartErrorBarwijmo.react.chart.analytics.FlexChartBreakEvenwijmo.react.chart.animation.FlexChartAnimationwijmo.react.chart.annotation.FlexChartAnnotationLayerwijmo.react.chart.interaction.FlexChartRangeSelectorwijmo.react.chart.interaction.FlexChartGestureswijmo.react.chart.FlexChartAxiswijmo.react.chart.FlexChartLegendwijmo.react.chart.FlexChartDataLabelwijmo.react.chart.FlexChartSerieswijmo.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プロパティを、チャートに表示するデータ項目を指定する配列に設定します。

階層