React チャート トレンドライン
Ignite UI for React チャートでは、トレンドラインはトレンドの識別やデータ内のパターンの検索に役立ちます。トレンドラインは、常にチャートにバインドされたデータ ポイントの前に描画されます。積層シリーズ、シェイプ シリーズ、および範囲シリーズを除き、これらは IgrCategoryChart
、IgrFinancialChart
、および IgrDataChart
(積層型シリーズ、シェイプ シリーズ、範囲シリーズを除く) でサポートされています。
トレンドラインはデフォルトでオフになっていますが、trendLineType
プロパティを設定することで有効にできます。また、ブラシ、期間、太さなど、トレンドラインの複数の外観プロパティを変更できます。
トレンドラインを有効にすると、ダッシュ配列を適用することもできます。これを行うには、TrendLineDashArray
プロパティを数値の配列に設定します。数値配列は、トレンドラインの破線の長さを表します。
React チャート トレンドラインの例
次のサンプルは、QuinticFit トレンドラインが最初に適用された、2013 年から 2017 年までの Microsoft の株価トレンドを示す IgrFinancialChart
を示しています。適用されるトレンドラインのタイプを変更できるドロップダウンがあり、可能なすべてのトレンドライン タイプがそのドロップダウン内に一覧表示されます。
export default class StocksHistory {
/** gets stock OHLC prices for multiple stocks */
public static async getMultipleStocks(): Promise<any[]> {
// getting prices of multiples stocks asynchronously
const dataSources: any[] = [
await this.getAmazonStock(),
await this.getGoogleStock(),
await this.getMicrosoftStock(),
await this.getTeslaStock()
];
return new Promise<any[]>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */
public static async getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Google"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
public static convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"
let item = new StockItem();
item.date = new Date(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
export class StockItem {
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrFinancialChart } from "@infragistics/igniteui-react-charts";
import { IgrFinancialChartModule } from "@infragistics/igniteui-react-charts";
import StocksHistory from './StocksHistory';
IgrFinancialChartModule.register();
export default class FinancialChartTrendlines extends React.Component<any, any> {
public data: any[];
constructor(props: any) {
super(props);
this.state = { trendLineType: "QuinticFit", data:[] }
this.initData();
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="options horizontal">
<label className="options-label">Trendlines:</label>
<select value={this.state.trendLineType}
onChange={this.onTrendlineChanged}>
<option>CubicFit</option>
<option>LinearFit</option>
<option>QuinticFit</option>
<option>QuarticFit</option>
<option>ExponentialFit</option>
<option>PowerLawFit</option>
<option>LogarithmicFit</option>
<option>CumulativeAverage</option>
<option>ExponentialAverage</option>
<option>SimpleAverage</option>
<option>ModifiedAverage</option>
<option>WeightedAverage</option>
<option>None</option>
</select>
</div>
<div className="container" style={{height: "calc(100% - 65px)"}}>
<IgrFinancialChart
width="100%"
height="100%"
chartType="Bar"
thickness={2}
trendLineType={this.state.trendLineType}
trendLineThickness={2}
trendLinePeriod={10}
trendLineBrushes="rgba(0, 101, 209, 1)"
chartTitle="Microsoft Trend"
subtitle="Between 2013 and 2017"
dataSource={this.state.data}
zoomSliderType="None"
isHorizontalZoomEnabled={false}
isVerticalZoomEnabled={false} />
</div>
</div>
);
}
public onTrendlineChanged = (e: any) =>{
const mode = e.target.value;
this.setState({trendLineType: mode});
}
public initData() {
StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
this.setState({ data: stocks });
});
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FinancialChartTrendlines/>);
tsx
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
React チャート トレンドラインのダッシュ配列の例
次のサンプルは、TrendLineDashArray
プロパティを介して適用された QuarticFit 破線トレンドラインを持つ IgrFinancialPriceSeries
を示す IgrDataChart
を示しています。
export class Stock2YearsItem {
public constructor(init: Partial<Stock2YearsItem>) {
Object.assign(this, init);
}
public month: string;
public open: number;
public high: number;
public low: number;
public close: number;
public volume: number;
}
export class Stock2Years extends Array<Stock2YearsItem> {
public constructor(items: Array<Stock2YearsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new Stock2YearsItem(
{
month: `2020`,
open: 41.1,
high: 41.6,
low: 41.1,
close: 41.4,
volume: 32610
}),
new Stock2YearsItem(
{
month: `FEB`,
open: 41.4,
high: 41.7,
low: 41.2,
close: 41.4,
volume: 28666
}),
new Stock2YearsItem(
{
month: `MAR`,
open: 41.3,
high: 41.3,
low: 40.7,
close: 41,
volume: 30139
}),
new Stock2YearsItem(
{
month: `APR`,
open: 41.3,
high: 41.4,
low: 39.6,
close: 39.9,
volume: 51409
}),
new Stock2YearsItem(
{
month: `MAY`,
open: 40,
high: 40.3,
low: 39.7,
close: 39.8,
volume: 37559
}),
new Stock2YearsItem(
{
month: `JUN`,
open: 39.8,
high: 39.9,
low: 39.2,
close: 39.8,
volume: 35919
}),
new Stock2YearsItem(
{
month: `JUL`,
open: 39.9,
high: 40.5,
low: 39.9,
close: 40.5,
volume: 27398
}),
new Stock2YearsItem(
{
month: `AUG`,
open: 40.4,
high: 40.7,
low: 39.1,
close: 39.4,
volume: 45960
}),
new Stock2YearsItem(
{
month: `SEP`,
open: 39,
high: 39.8,
low: 39,
close: 39.2,
volume: 34333
}),
new Stock2YearsItem(
{
month: `OCT`,
open: 39.1,
high: 39.4,
low: 38.9,
close: 39.2,
volume: 32006
}),
new Stock2YearsItem(
{
month: `NOV`,
open: 39.3,
high: 40,
low: 39,
close: 39.8,
volume: 33978
}),
new Stock2YearsItem(
{
month: `DEC`,
open: 40.1,
high: 40.4,
low: 39.9,
close: 40.4,
volume: 30616
}),
new Stock2YearsItem(
{
month: `2021`,
open: 40,
high: 40.2,
low: 39.5,
close: 40,
volume: 36689
}),
new Stock2YearsItem(
{
month: `FEB`,
open: 40.1,
high: 40.1,
low: 39.8,
close: 39.9,
volume: 22222
}),
new Stock2YearsItem(
{
month: `MAR`,
open: 40,
high: 40.1,
low: 39.8,
close: 40,
volume: 27057
}),
new Stock2YearsItem(
{
month: `APR`,
open: 40,
high: 40,
low: 39.5,
close: 39.7,
volume: 24602
}),
new Stock2YearsItem(
{
month: `MAY`,
open: 39.7,
high: 40,
low: 39.3,
close: 39.9,
volume: 42381
}),
new Stock2YearsItem(
{
month: `JUN`,
open: 40.3,
high: 40.7,
low: 39.8,
close: 39.9,
volume: 56883
}),
new Stock2YearsItem(
{
month: `JUL`,
open: 40.1,
high: 41.3,
low: 40.1,
close: 40.9,
volume: 50610
}),
new Stock2YearsItem(
{
month: `AUG`,
open: 41.1,
high: 41.2,
low: 40.4,
close: 40.5,
volume: 29637
}),
new Stock2YearsItem(
{
month: `SEP`,
open: 39,
high: 39.8,
low: 39,
close: 39.2,
volume: 34333
}),
new Stock2YearsItem(
{
month: `OCT`,
open: 39.1,
high: 39.4,
low: 38.9,
close: 39.2,
volume: 32006
}),
new Stock2YearsItem(
{
month: `NOV`,
open: 39.3,
high: 40,
low: 39,
close: 39.8,
volume: 33978
}),
new Stock2YearsItem(
{
month: `DEC`,
open: 40.1,
high: 40.4,
low: 39.9,
close: 40.4,
volume: 30616
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartCategoryTrendLineModule, IgrDataChartFinancialCoreModule, IgrDataChartFinancialModule, IgrDataChartFinancialOverlaysModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrFinancialPriceSeries } from "@infragistics/igniteui-react-charts";
import { Stock2YearsItem, Stock2Years } from './Stock2Years';
const mods: any[] = [
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartCategoryTrendLineModule,
IgrDataChartFinancialCoreModule,
IgrDataChartFinancialModule,
IgrDataChartFinancialOverlaysModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private series1: IgrFinancialPriceSeries
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
shouldAutoExpandMarginForInitialLabels="true"
computedPlotAreaMarginMode="Series"
isVerticalZoomEnabled="true"
isHorizontalZoomEnabled="true">
<IgrCategoryXAxis
name="xAxis"
dataSource={this.stock2Years}
labelLocation="OutsideBottom"
label="month"
interval="1"
labelExtent="30">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
labelLocation="OutsideRight">
</IgrNumericYAxis>
<IgrFinancialPriceSeries
name="Series1"
title="Stock Price"
displayType="Candlestick"
xAxisName="xAxis"
yAxisName="yAxis"
dataSource={this.stock2Years}
openMemberPath="open"
highMemberPath="high"
lowMemberPath="low"
closeMemberPath="close"
volumeMemberPath="volume"
showDefaultTooltip="true"
trendLineType="QuarticFit"
trendLineBrush="dodgerblue"
trendLineDashArray="5, 5">
</IgrFinancialPriceSeries>
</IgrDataChart>
</div>
</div>
);
}
private _stock2Years: Stock2Years = null;
public get stock2Years(): Stock2Years {
if (this._stock2Years == null)
{
this._stock2Years = new Stock2Years();
}
return this._stock2Years;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
IgrCategoryChart
コンポーネントと IgrFinancialChart
コンポーネントは、次の API プロパティを共有します:
IgrDataChart
コンポーネントでは、シリーズのほとんどのタイプに次の API プロパティがあります: