React 折れ線チャート
Ignite UI for React 折れ線チャート (または折れ線グラフ) は、カテゴリ チャートの一種で、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントで表される連続データ値を示します。トレンドの表示や比較分析によく使用されます。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。
React 折れ線チャートの例
次の例に示すように、データを ItemsSource
プロパティにバインドし、chartType
プロパティを Line
列挙型に設定することで、IgrCategoryChart
コントロールに React 折れ線チャートを作成できます。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Renewable Electricity Generated
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Line"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
dataSource={this.countryRenewableElectricity}
includedProperties={["year", "europe", "china", "america"]}
legend={this.legend}
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
computedPlotAreaMarginMode="Series">
</IgrCategoryChart>
</div>
</div>
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
// 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
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
折れ線チャートの推奨事項
React 折れ線チャートはプロジェクトに適していますか?
- エリア チャートとは異なり、折れ線チャートは X 軸 (下軸) と線の間の領域を塗りつぶしません。
- React 折れ線チャートは、データ ポイントをつなぐ線にスプライン補間とデータの表示を改善するスムージングがないこと以外は、React スプライン チャートと同じです。
折れ線チャートには、データに基づいて複数のバリアントがあります。以下が含まれます。
- 階層型折れ線チャート
- 積層型折れ線チャート
- ステップ折れ線チャート
- 極座標型折れ線チャート
- 積層型 100 折れ線チャート
折れ線チャートのユースケース
折れ線チャートを選択するための一般的なユースケースはいくつかあります:
- パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合
- 経時的なトレンドを比較する必要がある場合
- 2 つ以上のデータ シリーズの違いを表示したい場合
- 個別のカテゴリの部分対全体の累積比較を表示したい場合
- 比較解析のために 1 つ以上のカテゴリのデータ トレンドを表示する必要がある場合
- 詳細な時系列データを可視化する必要がある場合
折れ線チャートのベスト プラクティス:
- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する
- 時系列データを左から右へ並べ替える
- 実線などの視覚属性を使用して一連のデータを表示する
以下の場合に折れ線チャートを使用しないでください。
- 多くの (7 または 10 以上) シリーズのデータがある場合チャートを読みやすくすることが目標である場合
- 時系列データの値は同じ (同じ期間のデータ) である場合; 重複した行を区別できなくなります。
折れ線チャートのデータ構造:
- データ ソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。
- データ ソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。
- データ ソースに少なくとも 1 つのデータ項目を含む必要があります
- すべてのデータ項目には、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
- すべてのデータ項目には少なくとも 1 つの数値データ列が含まれている必要があります。
単一シリーズの React 折れ線チャート
以下の例に示すように、React 折れ線チャートは、2009 年以降の 10 年間の再生可能電力量など、値の経時変化を示すためによく使用されます。
IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType
プロパティを Line
に設定します:
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Renewable Electricity Generated
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Line"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
dataSource={this.countryRenewableElectricity}
includedProperties={["year", "europe"]}
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
computedPlotAreaMarginMode="Series">
</IgrCategoryChart>
</div>
</div>
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
// 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
複数シリーズの React 折れ線チャート
React 折れ線チャートを使用すると、複数のシリーズを組み合わせて時間の経過に伴う変化を比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、折れ線チャートは追加データに合わせて自動的に更新されます。
IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType
プロパティを Line
に設定します:
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Renewable Electricity Generated
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Line"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
dataSource={this.countryRenewableElectricity}
includedProperties={["year", "europe", "china", "america"]}
legend={this.legend}
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
computedPlotAreaMarginMode="Series">
</IgrCategoryChart>
</div>
</div>
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
// 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
ライブ データの React 折れ線チャート
React 折れ線チャートは、次のデモに示すように、数百万に及ぶデータ ポイントを含む大量データを処理し、それらを数ミリ秒ごとに更新できます。
この例では、選択した間隔でライブ データを React 折れ線チャートにストリーミングしています。データ ポイントを 5,000 から 100 万に設定し、チャートを更新してチャートを描画するデバイスに基づいてスケールを最適化できます。
IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType
プロパティを Line
に設定します:
export class CategoryChartSharedData {
public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {
const data: any[] = [];
let value = startValue;
for (let i = 0; i <= maxPoints; i++) {
value += Math.random() * 4.0 - 2.0;
const v = Math.round(value);
let l = i.toString();
if (useShortLabels) {
l = this.toShortString(i);
}
data.push({ Label: l, Value: v });
}
return data;
}
public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
const data: any[] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math.random() - 0.5) * 0.5;
const v = Math.abs(Math.round(value * 10) / 10);
data.push({ Label: i.toString(), Value: v });
}
return data;
}
public static getLastItem(array: any[]): any {
if (array.length === 0) {
return null;
}
return array[array.length - 1];
}
public static getNewItem(array: any[], index: number): any {
const lastItem = this.getLastItem(array);
const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
return { Label: index.toString(), Value: newValue };
}
public static toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
public static addDays(date: Date, days: number): Date {
date.setDate(date.getDate() + days);
return date;
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { CategoryChartSharedData } from './CategoryChartSharedData';
IgrCategoryChartModule.register();
export default class CategoryChartHighFrequency extends React.Component<any, any> {
public dataIndex: number = 0;
public dataPoints: number = 500;
public data: any[];
public refreshMilliseconds: number = 5;
public interval: number = -1;
public chart: IgrCategoryChart;
constructor(props: any) {
super(props);
this.onChartRef = this.onChartRef.bind(this);
this.onRefreshFrequencyChanged = this.onRefreshFrequencyChanged.bind(this);
this.onDataGenerateClick = this.onDataGenerateClick.bind(this);
this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
this.onDataFeedClick = this.onDataFeedClick.bind(this);
this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);
this.dataIndex = this.data.length;
this.state = {
dataFeedAction: "Start",
dataInfo: CategoryChartSharedData.toShortString(this.dataPoints),
dataPoints: this.dataPoints,
dataSource: this.data,
scalingRatio: window.devicePixelRatio,
refreshInterval: this.refreshMilliseconds,
refreshInfo: "5ms"
}
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="options horizontal">
<button onClick={this.onDataFeedClick}>{this.state.dataFeedAction}</button>
<label className="options-label">Refresh: </label>
<label className="options-value">{this.state.refreshInfo}</label>
<input className="options-slider" type="range" min="5" max="250" step="5"
value={this.state.refreshInterval}
onChange={this.onRefreshFrequencyChanged} />
<button onClick={this.onDataGenerateClick}>Generate</button>
<label className="options-label">Data Points: </label>
<label className="options-value">{this.state.dataInfo}</label>
<input className="options-slider" type="range" min="100" max="2000" step="100"
value={this.state.dataPoints}
onChange={this.onDataPointsChanged} />
</div>
<div className="container" style={{ height: "calc(100% - 45px)" }} >
<IgrCategoryChart ref={this.onChartRef}
width="100%"
height="100%"
chartType="Line"
dataSource={this.state.dataSource}
yAxisExtent={40}
xAxisEnhancedIntervalPreferMoreCategoryLabels="false"
shouldConsiderAutoRotationForInitialLabels="false"
shouldAutoExpandMarginForInitialLabels="false"
crosshairsDisplayMode="None"
autoMarginAndAngleUpdateMode="None"
markerTypes="None" />
</div>
</div>
);
}
public componentWillUnmount() {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
}
public onChartRef(chart: IgrCategoryChart) {
if (!chart) { return; }
this.chart = chart;
this.onChartInit();
}
public onChartInit(): void {
this.setupInterval();
}
public onDataGenerateClick() {
this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);
this.dataIndex = this.data.length;
this.setState({ dataSource: this.data });
}
public onDataFeedClick() {
let feedAction = this.state.dataFeedAction;
if (feedAction === "Start") {
this.setState({ dataFeedAction: "Stop" });
}
else {
this.setState({ dataFeedAction: "Start" });
}
}
public onDataPointsChanged = (e: any) => {
let num: number = parseInt(e.target.value, 10);
if (isNaN(num)) {
num = 10000;
}
if (num < 100) {
num = 100;
}
if (num > 2000) {
num = 2000;
}
const info = CategoryChartSharedData.toShortString(num);
this.dataPoints = num;
this.setState({ dataPoints: num, dataInfo: info });
}
public ngOnDestroy(): void {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
}
public onRefreshFrequencyChanged = (e: any) => {
let num: number = parseInt(e.target.value, 10);
if (isNaN(num)) {
num = 10;
}
if (num < 10) {
num = 10;
}
if (num > 500) {
num = 500;
}
this.refreshMilliseconds = num;
this.setState({ refreshInterval: num, refreshInfo: this.refreshMilliseconds + "ms" });
this.setupInterval();
}
public setupInterval(): void {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
this.interval = window.setInterval(() => this.tick(),
this.refreshMilliseconds);
}
public tick(): void {
if (this.state.dataFeedAction === "Stop") {
this.dataIndex++;
const oldItem = this.data[0];
const newItem = CategoryChartSharedData.getNewItem(this.data, this.dataIndex);
// updating data source and notifying category chart
this.data.push(newItem);
this.chart.notifyInsertItem(this.data, this.data.length - 1, newItem);
this.data.shift();
this.chart.notifyRemoveItem(this.data, 0, oldItem);
}
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CategoryChartHighFrequency/>);
tsx
React 折れ線チャートのスタイル設定
チャートを設定したら、線の色の変更、凡例のフォント ファミリの変更、軸ラベルのサイズの増加など読みやすくするためにスタイル設定をカスタマイズできます。
IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType
プロパティを Line
に設定します:
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Renewable Electricity Generated
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
dataSource={this.countryRenewableElectricity}
chartType="Line"
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
markerBrushes="rgba(238, 88, 121, 1) rgba(196, 196, 196, 1) rgba(154, 242, 228, 1)"
markerOutlines="white"
brushes="rgba(238, 88, 121, 1) rgba(196, 196, 196, 1) rgba(154, 242, 228, 1)"
outlines="rgba(238, 88, 121, 1) rgba(196, 196, 196, 1) rgba(154, 242, 228, 1)"
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisLabelLeftMargin="0"
thickness="2"
computedPlotAreaMarginMode="Series">
</IgrCategoryChart>
</div>
</div>
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
// 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
IgrDataChart
を使用し、系列に dashArray
プロパティを設定することで、IgrLineSeries
内に破線を作成することもできます。このプロパティは、線の結果として得られるダッシュの長さを表す数値の配列を受け取ります。
次の例は、IgrDataChart
の IgrLineSeries
での dashArray
の使用法を示しています。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrLineSeries } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private lineSeries1: IgrLineSeries
private lineSeries2: IgrLineSeries
private lineSeries3: IgrLineSeries
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Renewable Electricity Generated
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
computedPlotAreaMarginMode="Series"
legend={this.legend}>
<IgrCategoryXAxis
name="xAxis"
dataSource={this.countryRenewableElectricity}
label="year">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis">
</IgrNumericYAxis>
<IgrLineSeries
name="LineSeries1"
title="Europe"
xAxisName="xAxis"
yAxisName="yAxis"
markerType="Circle"
dataSource={this.countryRenewableElectricity}
valueMemberPath="europe"
showDefaultTooltip="true"
dashArray="2, 2">
</IgrLineSeries>
<IgrLineSeries
name="LineSeries2"
title="China"
xAxisName="xAxis"
yAxisName="yAxis"
markerType="Circle"
dataSource={this.countryRenewableElectricity}
valueMemberPath="china"
showDefaultTooltip="true"
dashArray="5, 5">
</IgrLineSeries>
<IgrLineSeries
name="LineSeries3"
title="America"
xAxisName="xAxis"
yAxisName="yAxis"
markerType="Circle"
dataSource={this.countryRenewableElectricity}
valueMemberPath="america"
showDefaultTooltip="true"
dashArray="10, 10">
</IgrLineSeries>
</IgrDataChart>
</div>
</div>
);
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
// 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
コントロールの代わりに IgrDataChart
コントロールを使用して作成できる、より高度なタイプの React 折れ線チャートについて説明します。
React 積層型折れ線チャート
積層型折れ線チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStackedLineSeries
にバインドします:
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartStackedModule, IgrStackedFragmentSeriesModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrStackedLineSeries, IgrStackedFragmentSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrDataChartStackedModule,
IgrStackedFragmentSeriesModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private stackedLineSeries: IgrStackedLineSeries
private s1: IgrStackedFragmentSeries
private s2: IgrStackedFragmentSeries
private s3: IgrStackedFragmentSeries
private s4: IgrStackedFragmentSeries
private s5: IgrStackedFragmentSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Annual Birth Rates by World Region
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryXAxis
name="xAxis"
dataSource={this.continentsBirthRate}
label="Year"
gap="0.75">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
minimumValue="0"
maximumValue="140"
interval="20"
title="Millions of Births"
titleAngle="-90"
labelFormat="{0} m">
</IgrNumericYAxis>
<IgrStackedLineSeries
name="stackedLineSeries"
dataSource={this.continentsBirthRate}
xAxisName="xAxis"
yAxisName="yAxis"
showDefaultTooltip="false"
markerType="Circle">
<IgrStackedFragmentSeries
name="s1"
valueMemberPath="Asia"
title="Asia">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s2"
valueMemberPath="Africa"
title="Africa">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s3"
valueMemberPath="Europe"
title="Europe">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s4"
valueMemberPath="NorthAmerica"
title="North America">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s5"
valueMemberPath="SouthAmerica"
title="South America">
</IgrStackedFragmentSeries>
</IgrStackedLineSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
// 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
React 積層型 100% 折れ線チャート
積層型 100% 折れ線チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型折れ線チャートと同じです。データを直接表現するのでなく、積層型 100% 折れ線チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStacked100LineSeries
にバインドします:
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartStackedModule, IgrStackedFragmentSeriesModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrStacked100LineSeries, IgrStackedFragmentSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrDataChartStackedModule,
IgrStackedFragmentSeriesModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private stacked100LineSeries: IgrStacked100LineSeries
private s1: IgrStackedFragmentSeries
private s2: IgrStackedFragmentSeries
private s3: IgrStackedFragmentSeries
private s4: IgrStackedFragmentSeries
private s5: IgrStackedFragmentSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Annual Birth Rates by World Region
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryXAxis
name="xAxis"
dataSource={this.continentsBirthRate}
label="Year">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
interval="20"
titleLeftMargin="10"
labelFormat="{0}%">
</IgrNumericYAxis>
<IgrStacked100LineSeries
name="stacked100LineSeries"
dataSource={this.continentsBirthRate}
xAxisName="xAxis"
yAxisName="yAxis"
showDefaultTooltip="false"
markerType="Circle">
<IgrStackedFragmentSeries
name="s1"
valueMemberPath="Asia"
title="Asia">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s2"
valueMemberPath="Africa"
title="Africa">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s3"
valueMemberPath="Europe"
title="Europe">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s4"
valueMemberPath="NorthAmerica"
title="North America">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s5"
valueMemberPath="SouthAmerica"
title="South America">
</IgrStackedFragmentSeries>
</IgrStacked100LineSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
// 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
React ラジアル折れ線チャート
ラジアル折れ線チャートはラジアル チャートのグループに属し、データ ポイントを接続する直線のコレクションによってバインドされた塗りつぶしなしのポリゴンの形状を持っています。このグラフ チャートは、折れ線チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrRadialLineSeries
にバインドします:
export class FootballPlayerStatsItem {
public constructor(init: Partial<FootballPlayerStatsItem>) {
Object.assign(this, init);
}
public attribute: string;
public ronaldo: number;
public messi: number;
}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FootballPlayerStatsItem(
{
attribute: `Dribbling`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Passing`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Finishing`,
ronaldo: 10,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Free Kicks`,
ronaldo: 8,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Penalties`,
ronaldo: 9,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Physical`,
ronaldo: 10,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Team Play`,
ronaldo: 7,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Heading`,
ronaldo: 9,
messi: 6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartRadialModule, IgrDataChartRadialCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryAngleAxis, IgrNumericRadiusAxis, IgrRadialLineSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartRadialModule,
IgrDataChartRadialCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private angleAxis: IgrCategoryAngleAxis
private radiusAxis: IgrNumericRadiusAxis
private radialLineSeries1: IgrRadialLineSeries
private radialLineSeries2: IgrRadialLineSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Ronaldo vs Messi Player Stats
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryAngleAxis
name="angleAxis"
dataSource={this.footballPlayerStats}
label="attribute">
</IgrCategoryAngleAxis>
<IgrNumericRadiusAxis
name="radiusAxis"
innerRadiusExtentScale="0.1"
interval="2"
minimumValue="0"
maximumValue="10">
</IgrNumericRadiusAxis>
<IgrRadialLineSeries
name="RadialLineSeries1"
dataSource={this.footballPlayerStats}
angleAxisName="angleAxis"
valueAxisName="radiusAxis"
valueMemberPath="ronaldo"
showDefaultTooltip="false"
areaFillOpacity="0.8"
thickness="3"
title="Ronaldo"
markerType="Circle">
</IgrRadialLineSeries>
<IgrRadialLineSeries
name="RadialLineSeries2"
dataSource={this.footballPlayerStats}
angleAxisName="angleAxis"
valueAxisName="radiusAxis"
valueMemberPath="messi"
showDefaultTooltip="false"
areaFillOpacity="0.8"
thickness="3"
title="Messi"
markerType="Circle">
</IgrRadialLineSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _footballPlayerStats: FootballPlayerStats = null;
public get footballPlayerStats(): FootballPlayerStats {
if (this._footballPlayerStats == null)
{
this._footballPlayerStats = new FootballPlayerStats();
}
return this._footballPlayerStats;
}
}
// 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
React 極座標型折れ線チャート
極座標折れ線チャートは極座標チャートのグループに属し、極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。極座標チャートは、散布折れ線チャートと同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントがを水平方向に引き伸ばされるのではなく、円の周りにラップされる点が異なります。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrPolarLineSeries
にバインドします:
export class BoatSailingDataItem {
public constructor(init: Partial<BoatSailingDataItem>) {
Object.assign(this, init);
}
public direction: number;
public boatSpeed: number;
public windSpeed: number;
}
export class BoatSailingData extends Array<BoatSailingDataItem> {
public constructor(items: Array<BoatSailingDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new BoatSailingDataItem(
{
direction: 0,
boatSpeed: 70,
windSpeed: 90
}),
new BoatSailingDataItem(
{
direction: 45,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 90,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 135,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 180,
boatSpeed: 0,
windSpeed: 0
}),
new BoatSailingDataItem(
{
direction: 225,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 270,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 315,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 360,
boatSpeed: 70,
windSpeed: 90
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartPolarModule, IgrDataChartPolarCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrNumericAngleAxis, IgrNumericRadiusAxis, IgrPolarLineSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartPolarModule,
IgrDataChartPolarCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private angleAxis: IgrNumericAngleAxis
private radiusAxis: IgrNumericRadiusAxis
private polarLineSeries1: IgrPolarLineSeries
private polarLineSeries2: IgrPolarLineSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Wind Speed vs Boat Speed
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrNumericAngleAxis
name="angleAxis"
startAngleOffset="-90"
interval="30"
minimumValue="0"
maximumValue="360">
</IgrNumericAngleAxis>
<IgrNumericRadiusAxis
name="radiusAxis"
radiusExtentScale="0.9"
innerRadiusExtentScale="0.1"
interval="25"
minimumValue="0"
maximumValue="100">
</IgrNumericRadiusAxis>
<IgrPolarLineSeries
name="PolarLineSeries1"
dataSource={this.boatSailingData}
angleAxisName="angleAxis"
radiusAxisName="radiusAxis"
angleMemberPath="direction"
radiusMemberPath="windSpeed"
showDefaultTooltip="false"
thickness="1"
title="Wind Speed"
markerType="Circle">
</IgrPolarLineSeries>
<IgrPolarLineSeries
name="PolarLineSeries2"
dataSource={this.boatSailingData}
angleAxisName="angleAxis"
radiusAxisName="radiusAxis"
angleMemberPath="direction"
radiusMemberPath="boatSpeed"
showDefaultTooltip="false"
thickness="1"
title="Boat Speed"
markerType="Circle">
</IgrPolarLineSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
}
// 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 リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
チャート タイプ | コントロール名 | API メンバー |
---|---|---|
折れ線 | IgrCategoryChart |
chartType = Line |
極座標折れ線 | IgrDataChart |
IgrPolarLineSeries |
ラジアル折れ線 | IgrDataChart |
IgrRadialLineSeries |
積層型折れ線 | IgrDataChart |
IgrStackedLineSeries |
積層型 100% 折れ線 | IgrDataChart |
IgrStacked100LineSeries |