React トレンドライン

React データ チャート コンポーネントは、シリーズにバインドされたデータの傾向を識別するのに役立つトレンドラインをサポートしています。

React トレンドラインの例

Edit on CodeSandbox

React データ チャート コンポーネントでは、チャート ナビゲーションがデフォルトで無効になっています。それらを設定するために、トレンドラインを表示したい対応するシリーズに trendLineType プロパティを設定できます。ブラシ、ピリオド、太さ、破線の配列など、トレンドラインの複数の外観プロパティを変更できます。

近似曲線は、積層シリーズとエリア シリーズを除くすべてのシリーズでサポートされています。以下は、一連のチャートで使用できるトレンドラインのリストです。

  • None
  • CubicFit
  • CumulativeAverage
  • ExponentialAverage
  • ExponentialFit
  • LinearFit
  • LogarithmicFit
  • ModifiedAverage
  • PowerLawFit
  • QuadraticFit
  • QuarticFit
  • QuinticFit
  • SimpleAverage
  • WeightedAverage

以下のコード スニペットは、React データ チャート コンポネントのシリーズに近似曲線を追加する方法を示しています。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px" >

    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrFinancialPriceSeries
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        highMemberPath="High"
        lowMemberPath="Low"
        closeMemberPath="Close"
        openMemberPath="Open"
        volumeMemberPath="Volume"
        trendLineType="CubicFit" />
</IgrDataChart>