React チャートとグラフの概要
Ignite UI for React チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイル アプリの魅力的でインタラクティブなチャートやダッシュボードを実現します。速度と美しさを重視して構築され、最新のすべてのブラウザで動作するように設計されており、完全なタッチとインタラクティブ機能により、レスポンシブ ビジュアルをあらゆるデバイスの次のアプリにすばやく簡単に組み込むことができます。
Ignite UI for React チャートは、カテゴリ シリーズ、ファイナンシャル シリーズ、極座標シリーズ、ラジアル シリーズ、範囲シリーズ、散布シリーズ、シェイプ シリーズ、地理空間シリーズなど、あらゆるタイプのデータを視覚化できる 65 種類以上のシリーズと組み合わせをサポートします。実行している比較のタイプ、または伝えようとしているデータ ストーリーのタイプに関係なく、次のいずれかの方法でデータを表すことができます:
- 時間毎の変化
- 比較
- 相関
- 配布
- 地理空間
- 概要 + 詳細
- 部分から全体
- ランキング
インフラジスティックスの React チャートを使用して、最もニーズの高い視覚化を強化してください。
React チャートとグラフのタイプ
React 製品には、単一のチャート表示からインタラクティブなダッシュボードまで、あらゆるシナリオに対応する 65 を超えるさまざまなチャートおよびグラフ タイプがあります。モバイル アプリやウェブ アプリ用に、円、棒、エリア、折れ線、ポイント、積層型、ドーナツ、散布、ゲージ、極座標、ツリーマップ、株価、ファイナンシャル、地理空間マップなどの React チャートを作成できます。React チャートと他のチャートの利点は、次のような機能が完全にサポートされていることです:
- 組み込まれたレスポンシブ Web デザイン
- マウス、キーボード、タッチを使用したインタラクティブなパンとズーム
- チャート アニメーションのフル コントロール
- チャート ドリルダウン イベント
- リアルタイム ストリーミングのサポート
- 大量 (数百万のデータ ポイント) のサポート
- トレンドラインおよびその他のデータ分析機能
React チャートは、軸、マーカー、シリーズ、凡例、および注釈レイヤーのモジュラー デザインで構築されており、あらゆるタイプのデータ ストーリーの描画を簡単にデザインできます。単一のデータ シリーズを使用して単純なチャートを作成するか、複合ビューに複数の軸があるデータの複数シリーズを使用してより複雑なデータ ストーリーを作成します。
カテゴリおよびファイナンシャル (財務) チャートとデータ チャートの比較
React カテゴリとファイナンシャル チャートは、ドメイン固有のチャートと呼ばれるものです。これは、ドメインがカテゴリまたは財務価格シリーズであることを前提とした React データ チャートのラッパーです。
これらの特定のドメイン チャートを選択すると、API が簡素化され、軸、系列、注釈などの属性を明示的に定義する必要なく、データに関する多くのインターフェイスを描画してチャート シナリオを自動的に構成できます。対照的に、データ チャートは非常に明示的であり、チャートのすべての重要な部分を定義する必要があります。
ドメイン チャートはその中核でデータ チャートを使用しています。したがって、同じパフォーマンスの最適化が両方に適用されます。違いは、開発者にとって非常に簡単に指定できるようにしようとしているのか、それとも可能な限り柔軟にしようとしているのかにあります。React データ チャートはより詳細であり、必要なすべてのチャート機能を利用できるようになり、たとえば、任意の数の系列、軸、または注釈を組み合わせて組み合わせることができます。カテゴリ チャートとファイナンシャル チャートでは、数値 X 軸を持つ散布系列を含む系列など、データ チャートの方が適している、簡単に実行できない状況が存在する可能性があります。
最初はどのチャートを選択すればよいのか判断するのが難しいかもしれません。シリーズのタイプと、提示したい追加機能の数を理解することが重要です。より軽量の基本カテゴリまたはファイナンシャル シリーズの場合は、ドメイン チャートのいずれかを使用することをお勧めします。より高度なシナリオの場合は、カテゴリ チャートの chartType
プロパティでカバーされるもの以外のもの (積層シリーズや散布シリーズ、数値データや時間ベースのデータなど) を表示するなど、React データ チャートの使用をお勧めします。React ファイナンシャル チャートでは、縦棒、OHLC バー、ローソク足、折れ線シリーズ タイプのみがカバーされていることに注意してください。
React カテゴリとファイナンシャル チャートを使いやすくしていますが、将来はいつでもデータ チャートに切り替えることができます。
React 棒チャート
React 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートの詳細をご覧ください。
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartCategoryCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartVerticalCategoryModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrCategoryHighlightLayer, IgrBarSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryCoreModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule,
IgrDataChartVerticalCategoryModule,
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private categoryHighlightLayer: IgrCategoryHighlightLayer
private barSeries1: IgrBarSeries
private barSeries2: IgrBarSeries
private tooltips: 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">
Highest Grossing Movie Franchises
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}>
<IgrCategoryYAxis
name="yAxis"
label="franchise"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
dataSource={this.highestGrossingMovies}
isInverted="true"
gap="0.5"
overlap="-0.1">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
title="Billions of U.S. Dollars">
</IgrNumericXAxis>
<IgrCategoryHighlightLayer
name="CategoryHighlightLayer">
</IgrCategoryHighlightLayer>
<IgrBarSeries
name="BarSeries1"
xAxisName="xAxis"
yAxisName="yAxis"
title="Total Revenue of Franchise"
valueMemberPath="totalRevenue"
dataSource={this.highestGrossingMovies}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrBarSeries
name="BarSeries2"
xAxisName="xAxis"
yAxisName="yAxis"
title="Highest Grossing Movie in Series"
valueMemberPath="highestGrossing"
dataSource={this.highestGrossingMovies}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrDataToolTipLayer
name="Tooltips">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
// 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 円チャート
React 円チャート、または円グラフは、一般的な部分から全体へのチャート タイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、100 または 100% などの全体の値を表します。円チャートは小さなデータセットに最適で、一目で簡単に読むことができます。円チャートの詳細をご覧ください。
export class EnergyGlobalDemandItem {
public constructor(init: Partial<EnergyGlobalDemandItem>) {
Object.assign(this, init);
}
public value: number;
public category: string;
public summary: string;
}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyGlobalDemandItem(
{
value: 37,
category: `Cooling`,
summary: `Cooling 37%`
}),
new EnergyGlobalDemandItem(
{
value: 25,
category: `Residential`,
summary: `Residential 25%`
}),
new EnergyGlobalDemandItem(
{
value: 12,
category: `Heating`,
summary: `Heating 12%`
}),
new EnergyGlobalDemandItem(
{
value: 11,
category: `Lighting`,
summary: `Lighting 11%`
}),
new EnergyGlobalDemandItem(
{
value: 15,
category: `Other`,
summary: `Other 15%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrItemLegendModule, IgrPieChartModule } from "@infragistics/igniteui-react-charts";
import { IgrItemLegend, IgrPieChart } from "@infragistics/igniteui-react-charts";
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
const mods: any[] = [
IgrItemLegendModule,
IgrPieChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrItemLegend
private legendRef(r: IgrItemLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrPieChart
private chartRef(r: IgrPieChart) {
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">
Global Electricity Demand by Energy Use
</div>
<div className="legend">
<IgrItemLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrItemLegend>
</div>
<div className="container fill">
<IgrPieChart
ref={this.chartRef}
legendLabelMemberPath="category"
labelMemberPath="summary"
labelsPosition="BestFit"
valueMemberPath="value"
radiusFactor="0.7"
dataSource={this.energyGlobalDemand}
legend={this.legend}>
</IgrPieChart>
</div>
</div>
);
}
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
}
// 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 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。折れ線チャートの詳細をご覧ください。
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 ドーナツ チャート、またはドーナツ グラフは、円チャートの変形であり、全体の一部を表す円内の変数の発生を比例的に示します。ドーナツ チャートには、円チャートの中央に円形の開口部があり、タイトルまたはカテゴリの説明を表示できます。ドーナツ チャートは、階層データを視覚化するための組み込みサポートを使用して、複数の同心円をサポートできます。ドーナツ チャートの詳細をご覧ください。
export class EnergyGlobalDemandItem {
public constructor(init: Partial<EnergyGlobalDemandItem>) {
Object.assign(this, init);
}
public value: number;
public category: string;
public summary: string;
}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyGlobalDemandItem(
{
value: 37,
category: `Cooling`,
summary: `Cooling 37%`
}),
new EnergyGlobalDemandItem(
{
value: 25,
category: `Residential`,
summary: `Residential 25%`
}),
new EnergyGlobalDemandItem(
{
value: 12,
category: `Heating`,
summary: `Heating 12%`
}),
new EnergyGlobalDemandItem(
{
value: 11,
category: `Lighting`,
summary: `Lighting 11%`
}),
new EnergyGlobalDemandItem(
{
value: 15,
category: `Other`,
summary: `Other 15%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrItemLegendModule, IgrDoughnutChartModule } from "@infragistics/igniteui-react-charts";
import { IgrItemLegend, IgrDoughnutChart, IgrRingSeries } from "@infragistics/igniteui-react-charts";
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
const mods: any[] = [
IgrItemLegendModule,
IgrDoughnutChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrItemLegend
private legendRef(r: IgrItemLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDoughnutChart
private chartRef(r: IgrDoughnutChart) {
this.chart = r;
this.setState({});
}
private series: IgrRingSeries
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">
Global Electricity Demand by Energy Use
</div>
<div className="legend">
<IgrItemLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrItemLegend>
</div>
<div className="container fill">
<IgrDoughnutChart
ref={this.chartRef}
allowSliceExplosion="true">
<IgrRingSeries
name="series"
labelMemberPath="summary"
labelsPosition="OutsideEnd"
labelExtent="30"
valueMemberPath="value"
legendLabelMemberPath="category"
outlines="white"
radiusFactor="0.6"
startAngle="30"
dataSource={this.energyGlobalDemand}
legend={this.legend}>
</IgrRingSeries>
</IgrDoughnutChart>
</div>
</div>
);
}
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
}
// 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 エリア チャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。エリア チャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。エリア チャートの詳細をご覧ください。
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="Area"
dataSource={this.countryRenewableElectricity}
includedProperties={["year", "europe", "china", "america"]}
legend={this.legend}
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
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 チャート タイプと同様に、スパークライン チャートには、チャート タイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークライン チャートは、折れ線チャート、エリア チャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパーク チャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。スパークライン チャートの詳細をご覧ください。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSparkline } from "@infragistics/igniteui-react-charts";
import { IgrSparklineModule } from "@infragistics/igniteui-react-charts";
import { IgrSparklineCoreModule } from "@infragistics/igniteui-react-charts";
IgrSparklineCoreModule.register();
IgrSparklineModule.register();
export default class SparklineDisplayTypes extends React.Component {
public data: any[];
public sparkline: IgrSparkline;
constructor(props: any) {
super(props);
this.data = this.generateData();
}
public render(): JSX.Element {
return (
<div className="container sample">
<label className="options-label">Sparkline with Line Display Type</label>
<div className="container">
<IgrSparkline height="100%" width="100%" displayType="Line"
dataSource={this.data} minimum={-1} maximum={1}
valueMemberPath="Value" labelMemberPath="Angle"/>
</div>
<label className="options-label">Sparkline with Area Display Type</label>
<div className="container">
<IgrSparkline height="100%" width="100%" displayType="Area"
dataSource={this.data} minimum={-1} maximum={1}
valueMemberPath="Value" labelMemberPath="Angle"/>
</div>
<label className="options-label">Sparkline with Column Display Type</label>
<div className="container">
<IgrSparkline height="100%" width="100%" displayType="Column"
dataSource={this.data} minimum={-1} maximum={1}
valueMemberPath="Value" labelMemberPath="Angle"/>
</div>
<label className="options-label">Sparkline with WinLoss Display Type</label>
<div className="container">
<IgrSparkline height="100%" width="100%" displayType="WinLoss"
dataSource={this.data} minimum={-1} maximum={1}
valueMemberPath="Value" labelMemberPath="Angle"/>
</div>
</div >
);
}
public generateData()
{
const data: any[] = [];
let index = 0;
let min = 1000.0;
let max = -1000.0;
for (let angle = 0; angle < 360 * 4; angle += 5)
{
let v1 = Math.sin(angle * Math.PI / 180);
let v2 = Math.sin(3 * angle * Math.PI / 180) / 3;
let revenue = v1 + v2;
let expanse = revenue < 0 ? revenue : 0;
let income = revenue > 0 ? revenue : 0;
data.push({
"Index": index++,
"Angle": angle,
// Value = v1 + v2
"Value": revenue,
"Expanse": expanse,
"Income": income
});
min = Math.min(min, v1 + v2);
max = Math.max(max, v1 + v2);
}
return data;
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SparklineDisplayTypes/>);
tsx
React バブル チャート
React バブル チャート (バブル グラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブル チャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。React バブル チャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。4 番目のデータ ディメンション (通常は色) を使用して、バブル チャートの値をさらに区別することもできます。バブル チャートの詳細をご覧ください。
export class CountryStatsAfricaItem {
public constructor(init: Partial<CountryStatsAfricaItem>) {
Object.assign(this, init);
}
public code: string;
public population: number;
public workedHours: number;
public gDP: number;
public name: string;
}
export class CountryStatsAfrica extends Array<CountryStatsAfricaItem> {
public constructor(items: Array<CountryStatsAfricaItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryStatsAfricaItem(
{
code: `DZA`,
population: 39728000,
workedHours: 47.5,
gDP: 13725,
name: `Algeria`
}),
new CountryStatsAfricaItem(
{
code: `AGO`,
population: 27884000,
workedHours: 39.8,
gDP: 6228,
name: `Angola`
}),
new CountryStatsAfricaItem(
{
code: `BEN`,
population: 10576000,
workedHours: 43.7,
gDP: 1987,
name: `Benin`
}),
new CountryStatsAfricaItem(
{
code: `BWA`,
population: 2121000,
workedHours: 41.2,
gDP: 15357,
name: `Botswana`
}),
new CountryStatsAfricaItem(
{
code: `BFA`,
population: 18111000,
workedHours: 39.3,
gDP: 1596,
name: `Burkina Faso`
}),
new CountryStatsAfricaItem(
{
code: `BDI`,
population: 10160000,
workedHours: 36.4,
gDP: 748,
name: `Burundi`
}),
new CountryStatsAfricaItem(
{
code: `CMR`,
population: 23298000,
workedHours: 42,
gDP: 3289,
name: `Cameroon`
}),
new CountryStatsAfricaItem(
{
code: `CPV`,
population: 525000,
workedHours: 45,
gDP: 5915,
name: `Cape Verde`
}),
new CountryStatsAfricaItem(
{
code: `CAF`,
population: 4493000,
workedHours: 38,
gDP: 622,
name: `Central African Republic`
}),
new CountryStatsAfricaItem(
{
code: `TCD`,
population: 14111000,
workedHours: 40.4,
gDP: 2067,
name: `Chad`
}),
new CountryStatsAfricaItem(
{
code: `COM`,
population: 777000,
workedHours: 40.1,
gDP: 1413,
name: `Comoros`
}),
new CountryStatsAfricaItem(
{
code: `COG`,
population: 4856000,
workedHours: 38.1,
gDP: 5543,
name: `Congo`
}),
new CountryStatsAfricaItem(
{
code: `CIV`,
population: 23226000,
workedHours: 39.7,
gDP: 3242,
name: `Cote Ivoire`
}),
new CountryStatsAfricaItem(
{
code: `COD`,
population: 76245000,
workedHours: 44,
gDP: 812,
name: `Democratic Republic of Congo`
}),
new CountryStatsAfricaItem(
{
code: `EGY`,
population: 92443000,
workedHours: 39.7,
gDP: 10096,
name: `Egypt`
}),
new CountryStatsAfricaItem(
{
code: `GNQ`,
population: 1169000,
workedHours: 38.8,
gDP: 27554,
name: `Equatorial Guinea`
}),
new CountryStatsAfricaItem(
{
code: `SWZ`,
population: 1104000,
workedHours: 45.7,
gDP: 7759,
name: `Eswatini`
}),
new CountryStatsAfricaItem(
{
code: `ETH`,
population: 101000000,
workedHours: 40.1,
gDP: 1533,
name: `Ethiopia`
}),
new CountryStatsAfricaItem(
{
code: `GAB`,
population: 1948000,
workedHours: 40.5,
gDP: 16837,
name: `Gabon`
}),
new CountryStatsAfricaItem(
{
code: `GMB`,
population: 2086000,
workedHours: 40.3,
gDP: 1568,
name: `Gambia`
}),
new CountryStatsAfricaItem(
{
code: `GHA`,
population: 27849000,
workedHours: 47.6,
gDP: 3927,
name: `Ghana`
}),
new CountryStatsAfricaItem(
{
code: `GIN`,
population: 11432000,
workedHours: 43.4,
gDP: 1758,
name: `Guinea`
}),
new CountryStatsAfricaItem(
{
code: `GNB`,
population: 1737000,
workedHours: 35.1,
gDP: 1446,
name: `Guinea-Bissau`
}),
new CountryStatsAfricaItem(
{
code: `KEN`,
population: 47878000,
workedHours: 43.9,
gDP: 2836,
name: `Kenya`
}),
new CountryStatsAfricaItem(
{
code: `LSO`,
population: 2059000,
workedHours: 47.6,
gDP: 2708,
name: `Lesotho`
}),
new CountryStatsAfricaItem(
{
code: `LBR`,
population: 4472000,
workedHours: 40.3,
gDP: 785,
name: `Liberia`
}),
new CountryStatsAfricaItem(
{
code: `LBY`,
population: 6418000,
workedHours: 42.5,
gDP: 14847,
name: `Libya`
}),
new CountryStatsAfricaItem(
{
code: `MDG`,
population: 24234000,
workedHours: 40.8,
gDP: 1377,
name: `Madagascar`
}),
new CountryStatsAfricaItem(
{
code: `MWI`,
population: 16745000,
workedHours: 44.5,
gDP: 1089,
name: `Malawi`
}),
new CountryStatsAfricaItem(
{
code: `MLI`,
population: 17439000,
workedHours: 40.6,
gDP: 1919,
name: `Mali`
}),
new CountryStatsAfricaItem(
{
code: `MRT`,
population: 4046000,
workedHours: 45.9,
gDP: 3602,
name: `Mauritania`
}),
new CountryStatsAfricaItem(
{
code: `MUS`,
population: 1259000,
workedHours: 44.4,
gDP: 18864,
name: `Mauritius`
}),
new CountryStatsAfricaItem(
{
code: `MAR`,
population: 34664000,
workedHours: 39.6,
gDP: 7297,
name: `Morocco`
}),
new CountryStatsAfricaItem(
{
code: `MOZ`,
population: 27042000,
workedHours: 46.7,
gDP: 1118,
name: `Mozambique`
}),
new CountryStatsAfricaItem(
{
code: `NAM`,
population: 2315000,
workedHours: 43.1,
gDP: 9975,
name: `Namibia`
}),
new CountryStatsAfricaItem(
{
code: `NER`,
population: 20002000,
workedHours: 45,
gDP: 908,
name: `Niger`
}),
new CountryStatsAfricaItem(
{
code: `NGA`,
population: 181000000,
workedHours: 32.76,
gDP: 5671,
name: `Nigeria`
}),
new CountryStatsAfricaItem(
{
code: `RWA`,
population: 11369000,
workedHours: 46.3,
gDP: 1731,
name: `Rwanda`
}),
new CountryStatsAfricaItem(
{
code: `STP`,
population: 199000,
workedHours: 38.2,
gDP: 2948,
name: `Sao Tome`
}),
new CountryStatsAfricaItem(
{
code: `SEN`,
population: 14578000,
workedHours: 46.8,
gDP: 2294,
name: `Senegal`
}),
new CountryStatsAfricaItem(
{
code: `SYC`,
population: 95000,
workedHours: 39.8,
gDP: 24857,
name: `Seychelles`
}),
new CountryStatsAfricaItem(
{
code: `SLE`,
population: 7172000,
workedHours: 35.4,
gDP: 1314,
name: `Sierra Leone`
}),
new CountryStatsAfricaItem(
{
code: `ZAF`,
population: 55386000,
workedHours: 42.48,
gDP: 12378,
name: `South Africa`
}),
new CountryStatsAfricaItem(
{
code: `SSD`,
population: 10716000,
workedHours: 39.3,
gDP: 1875,
name: `South Sudan`
}),
new CountryStatsAfricaItem(
{
code: `SDN`,
population: 38903000,
workedHours: 36.3,
gDP: 4290,
name: `Sudan`
}),
new CountryStatsAfricaItem(
{
code: `TZA`,
population: 51483000,
workedHours: 38,
gDP: 2491,
name: `Tanzania`
}),
new CountryStatsAfricaItem(
{
code: `TGO`,
population: 7323000,
workedHours: 38.8,
gDP: 1351,
name: `Togo`
}),
new CountryStatsAfricaItem(
{
code: `TUN`,
population: 11180000,
workedHours: 35.2,
gDP: 10766,
name: `Tunisia`
}),
new CountryStatsAfricaItem(
{
code: `UGA`,
population: 38225000,
workedHours: 38.6,
gDP: 1666,
name: `Uganda`
}),
new CountryStatsAfricaItem(
{
code: `ZMB`,
population: 15879000,
workedHours: 46.6,
gDP: 3627,
name: `Zambia`
}),
new CountryStatsAfricaItem(
{
code: `ZWE`,
population: 13815000,
workedHours: 41.4,
gDP: 1912,
name: `Zimbabwe`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class CountryStatsEuropeItem {
public constructor(init: Partial<CountryStatsEuropeItem>) {
Object.assign(this, init);
}
public code: string;
public population: number;
public workedHours: number;
public gDP: number;
public name: string;
}
export class CountryStatsEurope extends Array<CountryStatsEuropeItem> {
public constructor(items: Array<CountryStatsEuropeItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryStatsEuropeItem(
{
code: `ALB`,
population: 2891000,
workedHours: 41,
gDP: 10970,
name: `Albania`
}),
new CountryStatsEuropeItem(
{
code: `AUT`,
population: 8679000,
workedHours: 30.75,
gDP: 44305,
name: `Austria`
}),
new CountryStatsEuropeItem(
{
code: `BLR`,
population: 9439000,
workedHours: 43.5,
gDP: 17230,
name: `Belarus`
}),
new CountryStatsEuropeItem(
{
code: `BEL`,
population: 11288000,
workedHours: 29.7,
gDP: 41708,
name: `Belgium`
}),
new CountryStatsEuropeItem(
{
code: `BIH`,
population: 3429000,
workedHours: 46.5,
gDP: 10932,
name: `Bosnia`
}),
new CountryStatsEuropeItem(
{
code: `BGR`,
population: 7200000,
workedHours: 31.62,
gDP: 17000,
name: `Bulgaria`
}),
new CountryStatsEuropeItem(
{
code: `HRV`,
population: 4233000,
workedHours: 35.15,
gDP: 20984,
name: `Croatia`
}),
new CountryStatsEuropeItem(
{
code: `CYP`,
population: 1161000,
workedHours: 34.42,
gDP: 30549,
name: `Cyprus`
}),
new CountryStatsEuropeItem(
{
code: `CZE`,
population: 10601000,
workedHours: 33.77,
gDP: 30605,
name: `Czechia`
}),
new CountryStatsEuropeItem(
{
code: `DNK`,
population: 5689000,
workedHours: 27.16,
gDP: 45459,
name: `Denmark`
}),
new CountryStatsEuropeItem(
{
code: `EST`,
population: 1315000,
workedHours: 35.61,
gDP: 27550,
name: `Estonia`
}),
new CountryStatsEuropeItem(
{
code: `FIN`,
population: 5481000,
workedHours: 31.48,
gDP: 38942,
name: `Finland`
}),
new CountryStatsEuropeItem(
{
code: `FRA`,
population: 64453000,
workedHours: 29.03,
gDP: 37766,
name: `France`
}),
new CountryStatsEuropeItem(
{
code: `DEU`,
population: 81787000,
workedHours: 26.31,
gDP: 43938,
name: `Germany`
}),
new CountryStatsEuropeItem(
{
code: `GRC`,
population: 10660000,
workedHours: 39.06,
gDP: 24170,
name: `Greece`
}),
new CountryStatsEuropeItem(
{
code: `HUN`,
population: 9778000,
workedHours: 36.99,
gDP: 25034,
name: `Hungary`
}),
new CountryStatsEuropeItem(
{
code: `ISL`,
population: 330000,
workedHours: 29.02,
gDP: 43048,
name: `Iceland`
}),
new CountryStatsEuropeItem(
{
code: `IRL`,
population: 4652000,
workedHours: 33.47,
gDP: 60818,
name: `Ireland`
}),
new CountryStatsEuropeItem(
{
code: `ITA`,
population: 60578000,
workedHours: 33.04,
gDP: 34302,
name: `Italy`
}),
new CountryStatsEuropeItem(
{
code: `LVA`,
population: 1998000,
workedHours: 36.57,
gDP: 23019,
name: `Latvia`
}),
new CountryStatsEuropeItem(
{
code: `LTU`,
population: 2932000,
workedHours: 35.76,
gDP: 27046,
name: `Lithuania`
}),
new CountryStatsEuropeItem(
{
code: `LUX`,
population: 567000,
workedHours: 29.25,
gDP: 94089,
name: `Luxembourg`
}),
new CountryStatsEuropeItem(
{
code: `MLT`,
population: 434000,
workedHours: 37.78,
gDP: 34087,
name: `Malta`
}),
new CountryStatsEuropeItem(
{
code: `MDA`,
population: 4071000,
workedHours: 41,
gDP: 4747,
name: `Moldova`
}),
new CountryStatsEuropeItem(
{
code: `MNE`,
population: 627000,
workedHours: 47.2,
gDP: 15290,
name: `Montenegro`
}),
new CountryStatsEuropeItem(
{
code: `NLD`,
population: 16938000,
workedHours: 27.38,
gDP: 46494,
name: `Netherlands`
}),
new CountryStatsEuropeItem(
{
code: `MKD`,
population: 2079000,
workedHours: 36.6,
gDP: 12760,
name: `North Macedonia`
}),
new CountryStatsEuropeItem(
{
code: `NOR`,
population: 5200000,
workedHours: 27.36,
gDP: 64008,
name: `Norway`
}),
new CountryStatsEuropeItem(
{
code: `POL`,
population: 38034000,
workedHours: 39.4,
gDP: 25300,
name: `Poland`
}),
new CountryStatsEuropeItem(
{
code: `PRT`,
population: 10368000,
workedHours: 36.06,
gDP: 26608,
name: `Portugal`
}),
new CountryStatsEuropeItem(
{
code: `ROU`,
population: 19925000,
workedHours: 34.34,
gDP: 20556,
name: `Romania`
}),
new CountryStatsEuropeItem(
{
code: `RUS`,
population: 145000000,
workedHours: 38.04,
gDP: 24517,
name: `Russia`
}),
new CountryStatsEuropeItem(
{
code: `SMR`,
population: 33000,
workedHours: 40.1,
gDP: 56372,
name: `San Marino`
}),
new CountryStatsEuropeItem(
{
code: `SRB`,
population: 8877000,
workedHours: 46.5,
gDP: 13278,
name: `Serbia`
}),
new CountryStatsEuropeItem(
{
code: `SVK`,
population: 5436000,
workedHours: 33.73,
gDP: 28309,
name: `Slovakia`
}),
new CountryStatsEuropeItem(
{
code: `SVN`,
population: 2071000,
workedHours: 32.46,
gDP: 29038,
name: `Slovenia`
}),
new CountryStatsEuropeItem(
{
code: `ESP`,
population: 46672000,
workedHours: 32.68,
gDP: 32291,
name: `Spain`
}),
new CountryStatsEuropeItem(
{
code: `SWE`,
population: 9765000,
workedHours: 30.96,
gDP: 45679,
name: `Sweden`
}),
new CountryStatsEuropeItem(
{
code: `CHE`,
population: 8297000,
workedHours: 30.57,
gDP: 57264,
name: `Switzerland`
}),
new CountryStatsEuropeItem(
{
code: `UKR`,
population: 44922000,
workedHours: 38.6,
gDP: 7465,
name: `Ukraine`
}),
new CountryStatsEuropeItem(
{
code: `GBR`,
population: 65860000,
workedHours: 32.1,
gDP: 38839,
name: `United Kingdom`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
const mods: any[] = [
IgrLegendModule,
IgrNumberAbbreviatorModule,
IgrDataChartCoreModule,
IgrDataChartScatterModule,
IgrDataChartScatterCoreModule,
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: IgrNumericXAxis
private yAxis: IgrNumericYAxis
private bubbleSeries1: IgrBubbleSeries
private _sizeScale1: IgrSizeScale | null = null;
public get sizeScale1(): IgrSizeScale {
if (this._sizeScale1 == null)
{
var sizeScale1 = new IgrSizeScale({});
sizeScale1.isLogarithmic = false;
sizeScale1.minimumValue = 10;
sizeScale1.maximumValue = 80;
this._sizeScale1 = sizeScale1;
}
return this._sizeScale1;
}
private bubbleSeries2: IgrBubbleSeries
private _sizeScale2: IgrSizeScale | null = null;
public get sizeScale2(): IgrSizeScale {
if (this._sizeScale2 == null)
{
var sizeScale2 = new IgrSizeScale({});
sizeScale2.isLogarithmic = false;
sizeScale2.minimumValue = 10;
sizeScale2.maximumValue = 80;
this._sizeScale2 = sizeScale2;
}
return this._sizeScale2;
}
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">
Total Population of Selected Countries
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}>
<IgrNumericXAxis
name="xAxis"
isLogarithmic="true"
abbreviateLargeNumbers="true"
title="Population">
</IgrNumericXAxis>
<IgrNumericYAxis
name="yAxis"
title="GDP per Capita"
maximumValue="1000000"
titleLeftMargin="10"
isLogarithmic="true"
abbreviateLargeNumbers="true">
</IgrNumericYAxis>
<IgrBubbleSeries
name="bubbleSeries1"
title="African Countries"
xAxisName="xAxis"
yAxisName="yAxis"
xMemberPath="population"
yMemberPath="gDP"
radiusMemberPath="workedHours"
xMemberAsLegendLabel="Population"
yMemberAsLegendLabel="GDP"
radiusMemberAsLegendLabel="Work Hours"
dataSource={this.countryStatsAfrica}
markerType="Circle"
showDefaultTooltip="true"
radiusScale={this.sizeScale1}>
</IgrBubbleSeries>
<IgrBubbleSeries
name="bubbleSeries2"
title="European Countries"
xAxisName="xAxis"
yAxisName="yAxis"
xMemberPath="population"
yMemberPath="gDP"
radiusMemberPath="workedHours"
xMemberAsLegendLabel="Population"
yMemberAsLegendLabel="GDP"
radiusMemberAsLegendLabel="Work Hours"
dataSource={this.countryStatsEurope}
markerType="Circle"
showDefaultTooltip="true"
radiusScale={this.sizeScale2}>
</IgrBubbleSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer"
valueRowMarginTop="1"
labelTextMarginTop="1"
titleTextMarginTop="1"
unitsTextMarginTop="1"
valueRowMarginBottom="1"
labelTextMarginBottom="1"
titleTextMarginBottom="1"
unitsTextMarginBottom="1"
unitsTextMarginRight="5"
valueTextMarginLeft="10"
labelTextMarginLeft="1"
layoutMode="Vertical">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _countryStatsAfrica: CountryStatsAfrica = null;
public get countryStatsAfrica(): CountryStatsAfrica {
if (this._countryStatsAfrica == null)
{
this._countryStatsAfrica = new CountryStatsAfrica();
}
return this._countryStatsAfrica;
}
private _countryStatsEurope: CountryStatsEurope = null;
public get countryStatsEurope(): CountryStatsEurope {
if (this._countryStatsEurope == null)
{
this._countryStatsEurope = new CountryStatsEurope();
}
return this._countryStatsEurope;
}
}
// 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 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャル チャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。株価チャートの詳細をご覧ください。
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 FinancialChartMultipleData extends React.Component<any, any> {
public data: any[];
constructor(props: any) {
super(props);
this.state = { data: [] };
this.initData();
}
public render(): JSX.Element {
return (
<div className="container sample" >
<div className="container" style={{height: "calc(100% - 25px)"}}>
<IgrFinancialChart
width="100%"
height="100%"
chartType="Line"
thickness={2}
chartTitle="Google vs Microsoft Changes"
subtitle="Between 2013 and 2017"
yAxisMode="PercentChange"
yAxisTitle="Percent Changed"
dataSource={this.state.data} />
</div>
</div>
);
}
public initData() {
StocksHistory.getMultipleStocks().then((stocks: any[]) => {
this.setState({ data: stocks });
});
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FinancialChartMultipleData/>);
tsx
React 縦棒チャート
React 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの上から下にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。縦棒チャートの詳細をご覧ください。
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
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 { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
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">
Highest Grossing Movie Franchises
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Column"
dataSource={this.highestGrossingMovies}
legend={this.legend}
xAxisInterval="1"
yAxisTitle="Billions of U.S. Dollars"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isCategoryHighlightingEnabled="true"
crosshairsDisplayMode="None">
</IgrCategoryChart>
</div>
</div>
);
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
// 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 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。複合チャートの詳細をご覧ください。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
IgrDataChartCoreModule,
IgrLegendModule,
IgrDataChartCategoryCoreModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrCalloutLayerModule,
IgrNumberAbbreviatorModule,
IgrDataChart,
IgrLegend,
IgrCategoryXAxis,
IgrNumericYAxis,
IgrColumnSeries,
IgrSplineAreaSeries,
IgrCalloutLayer
} from "@infragistics/igniteui-react-charts";
IgrDataChartCoreModule.register();
IgrDataChartCategoryCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartAnnotationModule.register();
IgrCalloutLayerModule.register();
IgrNumberAbbreviatorModule.register();
IgrLegendModule.register();
export default class DataChartCompositeChart extends React.Component<any, any> {
public data: any[];
public chart: IgrDataChart;
public legend: IgrLegend;
constructor(props: any) {
super(props);
this.onChartRef = this.onChartRef.bind(this);
this.onLegendRef = this.onLegendRef.bind(this);
this.initData();
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="options vertical">
<span className="legend-title">
Amazon Statement of Income 2019-2021
</span>
<IgrLegend ref={this.onLegendRef} orientation="Horizontal" />
</div>
<div className="container" style={{ height: "calc(100% - 35px)" }}>
<IgrDataChart
ref={this.onChartRef}
width="100%"
height="100%"
dataSource={this.data}
isHorizontalZoomEnabled={false}
isVerticalZoomEnabled={false}
>
<IgrCategoryXAxis name="xAxis" label="Date" overlap="0" gap="0.1" useClusteringMode={true}/>
<IgrNumericYAxis name="yAxis" abbreviateLargeNumbers={true} title="U.S. Dollars" minimumValue={0} maximumValue={30000000} titleLeftMargin={5} titleRightMargin={0}/>
<IgrNumericYAxis name="yAxis2" abbreviateLargeNumbers={true} title="Percentage" majorStrokeThickness={0} minimumValue={0} maximumValue={160} labelLocation="OutsideRight" labelHorizontalAlignment="Left"/>
<IgrColumnSeries name="series1" xAxisName="xAxis" yAxisName="yAxis" valueMemberPath="Revenue" title="Revenue" markerType="Hidden"/>
<IgrColumnSeries name="series2" xAxisName="xAxis" yAxisName="yAxis" valueMemberPath="Expenses" title="Expenses" markerType="Hidden"/>
<IgrSplineAreaSeries name="series3" xAxisName="xAxis" yAxisName="yAxis2" valueMemberPath="IncomePerRevenue" title="Income / Revenue %" markerType="Circle"/>
<IgrCalloutLayer name="callout1" targetSeriesName="series1" xMemberPath="RevenueX" yMemberPath="Revenue" labelMemberPath="FormattedRevenue" isAutoCalloutBehaviorEnabled={false} useValueForAutoCalloutLabels={false} calloutLeaderBrush="Transparent" calloutBackground="Transparent" calloutTextColor="Black" calloutPositionPadding="-5"/>
<IgrCalloutLayer name="callout2" targetSeriesName="series2" xMemberPath="ExpensesX" yMemberPath="Expenses" labelMemberPath="FormattedExpenses" isAutoCalloutBehaviorEnabled={false} useValueForAutoCalloutLabels={false} calloutLeaderBrush="Transparent" calloutBackground="Transparent" calloutTextColor="Black" calloutPositionPadding="-5"/>
<IgrCalloutLayer name="callout3" targetSeriesName="series3" isAutoCalloutBehaviorEnabled={true} useValueForAutoCalloutLabels={true} calloutLeaderBrush="Transparent" calloutTextColor="Black" calloutBackground="LightGray" autoCalloutLabelPrecision={1}/>
</IgrDataChart>
</div>
</div>
);
}
public onChartRef(chart: IgrDataChart) {
if (!chart) {
return;
}
this.chart = chart;
if (this.legend) {
this.chart.legend = this.legend;
}
}
public onLegendRef(legend: IgrLegend) {
if (!legend) {
return;
}
this.legend = legend;
if (this.chart) {
this.chart.legend = this.legend;
}
}
public formatNumber(num: number): string {
var ret = num;
if (num >= 1000000) return (num / 1000000.0).toFixed(1) + "M";
if (num >= 1000) return (num / 1000.0).toFixed(1) + "K";
return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
public initData() {
this.data = [
{ Date: "Jan 1, 2019", Revenue: 16914, Expenses: 10183 },
{ Date: "Mar 1, 2019", Revenue: 15077, Expenses: 12813 },
{ Date: "Jun 1, 2019", Revenue: 16886, Expenses: 14476 },
{ Date: "Sep 1, 2019", Revenue: 17652, Expenses: 11705 },
{ Date: "Jan 1, 2020", Revenue: 21082, Expenses: 14044 },
{ Date: "Mar 1, 2020", Revenue: 17737, Expenses: 12803 },
{ Date: "Jun 1, 2020", Revenue: 18687, Expenses: 13677 },
{ Date: "Sep 1, 2020", Revenue: 21470, Expenses: 13717 },
{ Date: "Jan 1, 2021", Revenue: 28072, Expenses: 17133 }
];
for (let i = 0; i < this.data.length; i++) {
const item = this.data[i];
item.Revenue = item.Revenue * 1000;
item.Expenses = item.Expenses * 1000;
item.Income = item.Revenue - item.Expenses;
item.IncomePerRevenue = (item.Income / item.Revenue) * 100;
// calculating x-offset for callouts
item.RevenueX = i;
item.ExpensesX = i + 0.5;
// formatting values for callouts
item.FormattedRevenue = "$" + this.formatNumber(item.Revenue);
item.FormattedIncome = "$" + this.formatNumber(item.Income);
item.FormattedExpenses = "$" + this.formatNumber(item.Expenses);
item.FormattedProfit = item.IncomePerRevenue + "%";
}
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataChartCompositeChart/>);
tsx
React 極座標チャート
React 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。極座標チャートの詳細をご覧ください。
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
React 散布図
React 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。React 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。散布図の詳細をご覧ください。
export class CountryDemographicAfricanItem {
public constructor(init: Partial<CountryDemographicAfricanItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicAfrican extends Array<CountryDemographicAfricanItem> {
public constructor(items: Array<CountryDemographicAfricanItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicAfricanItem(
{
population: 39728000,
birthRate: 23.9,
deathRate: 4.77,
name: `Algeria`
}),
new CountryDemographicAfricanItem(
{
population: 27884000,
birthRate: 42.32,
deathRate: 8.68,
name: `Angola`
}),
new CountryDemographicAfricanItem(
{
population: 10576000,
birthRate: 37.43,
deathRate: 9.32,
name: `Benin`
}),
new CountryDemographicAfricanItem(
{
population: 2121000,
birthRate: 24.14,
deathRate: 7.02,
name: `Botswana`
}),
new CountryDemographicAfricanItem(
{
population: 18111000,
birthRate: 39.44,
deathRate: 8.82,
name: `Burkina Faso`
}),
new CountryDemographicAfricanItem(
{
population: 10160000,
birthRate: 42.66,
deathRate: 11.03,
name: `Burundi`
}),
new CountryDemographicAfricanItem(
{
population: 23298000,
birthRate: 36.84,
deathRate: 10.35,
name: `Cameroon`
}),
new CountryDemographicAfricanItem(
{
population: 525000,
birthRate: 21.14,
deathRate: 5.61,
name: `Cape Verde`
}),
new CountryDemographicAfricanItem(
{
population: 4493000,
birthRate: 36.11,
deathRate: 14.01,
name: `C.A.R.`
}),
new CountryDemographicAfricanItem(
{
population: 14111000,
birthRate: 43.86,
deathRate: 13.22,
name: `Chad`
}),
new CountryDemographicAfricanItem(
{
population: 777000,
birthRate: 33.33,
deathRate: 7.49,
name: `Comoros`
}),
new CountryDemographicAfricanItem(
{
population: 4856000,
birthRate: 35.23,
deathRate: 7.56,
name: `Congo`
}),
new CountryDemographicAfricanItem(
{
population: 23226000,
birthRate: 37.1,
deathRate: 12.54,
name: `Cote Ivoire`
}),
new CountryDemographicAfricanItem(
{
population: 76245000,
birthRate: 42.81,
deathRate: 10.19,
name: `DCongo`
}),
new CountryDemographicAfricanItem(
{
population: 914000,
birthRate: 23.35,
deathRate: 8.37,
name: `Djibouti`
}),
new CountryDemographicAfricanItem(
{
population: 92443000,
birthRate: 27.2,
deathRate: 5.96,
name: `Egypt`
}),
new CountryDemographicAfricanItem(
{
population: 1169000,
birthRate: 34.64,
deathRate: 10.34,
name: `Equatorial Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 3343000,
birthRate: 32.83,
deathRate: 7.07,
name: `Eritrea`
}),
new CountryDemographicAfricanItem(
{
population: 100835000,
birthRate: 32.3,
deathRate: 7,
name: `Ethiopia`
}),
new CountryDemographicAfricanItem(
{
population: 1948000,
birthRate: 30.09,
deathRate: 7.82,
name: `Gabon`
}),
new CountryDemographicAfricanItem(
{
population: 2086000,
birthRate: 39.99,
deathRate: 8.2,
name: `Gambia`
}),
new CountryDemographicAfricanItem(
{
population: 27849000,
birthRate: 31.56,
deathRate: 8.31,
name: `Ghana`
}),
new CountryDemographicAfricanItem(
{
population: 11432000,
birthRate: 36.36,
deathRate: 9.58,
name: `Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 1737000,
birthRate: 37.15,
deathRate: 10.78,
name: `Guinea-Bissau`
}),
new CountryDemographicAfricanItem(
{
population: 47878000,
birthRate: 31.78,
deathRate: 5.84,
name: `Kenya`
}),
new CountryDemographicAfricanItem(
{
population: 2059000,
birthRate: 28.16,
deathRate: 12.92,
name: `Lesotho`
}),
new CountryDemographicAfricanItem(
{
population: 4472000,
birthRate: 34.72,
deathRate: 8.12,
name: `Liberia`
}),
new CountryDemographicAfricanItem(
{
population: 6418000,
birthRate: 20.19,
deathRate: 5.2,
name: `Libya`
}),
new CountryDemographicAfricanItem(
{
population: 24234000,
birthRate: 33.4,
deathRate: 6.48,
name: `Madagascar`
}),
new CountryDemographicAfricanItem(
{
population: 16745000,
birthRate: 37.05,
deathRate: 7.5,
name: `Malawi`
}),
new CountryDemographicAfricanItem(
{
population: 17439000,
birthRate: 43.22,
deathRate: 10.67,
name: `Mali`
}),
new CountryDemographicAfricanItem(
{
population: 4046000,
birthRate: 34.57,
deathRate: 7.96,
name: `Mauritania`
}),
new CountryDemographicAfricanItem(
{
population: 1259000,
birthRate: 10.1,
deathRate: 7.7,
name: `Mauritius`
}),
new CountryDemographicAfricanItem(
{
population: 34664000,
birthRate: 20.4,
deathRate: 5.15,
name: `Morocco`
}),
new CountryDemographicAfricanItem(
{
population: 27042000,
birthRate: 39.36,
deathRate: 10.38,
name: `Mozambique`
}),
new CountryDemographicAfricanItem(
{
population: 2315000,
birthRate: 29.59,
deathRate: 7.46,
name: `Namibia`
}),
new CountryDemographicAfricanItem(
{
population: 20002000,
birthRate: 48.44,
deathRate: 9.94,
name: `Niger`
}),
new CountryDemographicAfricanItem(
{
population: 181136992,
birthRate: 39.37,
deathRate: 12.77,
name: `Nigeria`
}),
new CountryDemographicAfricanItem(
{
population: 11369000,
birthRate: 31.79,
deathRate: 6.13,
name: `Rwanda`
}),
new CountryDemographicAfricanItem(
{
population: 199000,
birthRate: 34.33,
deathRate: 6.81,
name: `Sao Tome and Principe`
}),
new CountryDemographicAfricanItem(
{
population: 14578000,
birthRate: 36.21,
deathRate: 6.07,
name: `Senegal`
}),
new CountryDemographicAfricanItem(
{
population: 95000,
birthRate: 17,
deathRate: 7.5,
name: `Seychelles`
}),
new CountryDemographicAfricanItem(
{
population: 7172000,
birthRate: 35.61,
deathRate: 13.03,
name: `Sierra Leone`
}),
new CountryDemographicAfricanItem(
{
population: 13797000,
birthRate: 43.66,
deathRate: 11.63,
name: `Somalia`
}),
new CountryDemographicAfricanItem(
{
population: 55386000,
birthRate: 21.3,
deathRate: 10.1,
name: `South Africa`
}),
new CountryDemographicAfricanItem(
{
population: 10716000,
birthRate: 36.32,
deathRate: 11.24,
name: `South Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 38903000,
birthRate: 33.32,
deathRate: 7.52,
name: `Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 1104000,
birthRate: 29.27,
deathRate: 9.86,
name: `Swaziland`
}),
new CountryDemographicAfricanItem(
{
population: 51483000,
birthRate: 38.64,
deathRate: 7.02,
name: `Tanzania`
}),
new CountryDemographicAfricanItem(
{
population: 7323000,
birthRate: 34.53,
deathRate: 8.83,
name: `Togo`
}),
new CountryDemographicAfricanItem(
{
population: 11180000,
birthRate: 18.65,
deathRate: 6.36,
name: `Tunisia`
}),
new CountryDemographicAfricanItem(
{
population: 38225000,
birthRate: 42.63,
deathRate: 8.87,
name: `Uganda`
}),
new CountryDemographicAfricanItem(
{
population: 15879000,
birthRate: 38.44,
deathRate: 8,
name: `Zambia`
}),
new CountryDemographicAfricanItem(
{
population: 13815000,
birthRate: 33.94,
deathRate: 8.4,
name: `Zimbabwe`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class CountryDemographicEuropeItem {
public constructor(init: Partial<CountryDemographicEuropeItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicEurope extends Array<CountryDemographicEuropeItem> {
public constructor(items: Array<CountryDemographicEuropeItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicEuropeItem(
{
population: 2891000,
birthRate: 11.88,
deathRate: 7.22,
name: `Albania`
}),
new CountryDemographicEuropeItem(
{
population: 8679000,
birthRate: 9.8,
deathRate: 9.6,
name: `Austria`
}),
new CountryDemographicEuropeItem(
{
population: 9439000,
birthRate: 12.5,
deathRate: 12.6,
name: `Belarus`
}),
new CountryDemographicEuropeItem(
{
population: 11288000,
birthRate: 10.8,
deathRate: 9.8,
name: `Belgium`
}),
new CountryDemographicEuropeItem(
{
population: 3429000,
birthRate: 9.12,
deathRate: 10.89,
name: `Bosnia`
}),
new CountryDemographicEuropeItem(
{
population: 7200000,
birthRate: 9.2,
deathRate: 15.3,
name: `Bulgaria`
}),
new CountryDemographicEuropeItem(
{
population: 165000,
birthRate: 9.39,
deathRate: 8.97,
name: `Channel Islands`
}),
new CountryDemographicEuropeItem(
{
population: 4233000,
birthRate: 8.9,
deathRate: 12.9,
name: `Croatia`
}),
new CountryDemographicEuropeItem(
{
population: 1161000,
birthRate: 10.98,
deathRate: 6.84,
name: `Cyprus`
}),
new CountryDemographicEuropeItem(
{
population: 10601000,
birthRate: 10.5,
deathRate: 10.5,
name: `Czechia`
}),
new CountryDemographicEuropeItem(
{
population: 5689000,
birthRate: 10.2,
deathRate: 9.2,
name: `Denmark`
}),
new CountryDemographicEuropeItem(
{
population: 1315000,
birthRate: 10.6,
deathRate: 11.6,
name: `Estonia`
}),
new CountryDemographicEuropeItem(
{
population: 48000,
birthRate: 12.4,
deathRate: 7.7,
name: `Faeroe Islands`
}),
new CountryDemographicEuropeItem(
{
population: 5481000,
birthRate: 10.1,
deathRate: 9.6,
name: `Finland`
}),
new CountryDemographicEuropeItem(
{
population: 64453000,
birthRate: 12,
deathRate: 8.9,
name: `France`
}),
new CountryDemographicEuropeItem(
{
population: 81787000,
birthRate: 9,
deathRate: 11.3,
name: `Germany`
}),
new CountryDemographicEuropeItem(
{
population: 10660000,
birthRate: 8.5,
deathRate: 11.2,
name: `Greece`
}),
new CountryDemographicEuropeItem(
{
population: 9778000,
birthRate: 9.4,
deathRate: 13.4,
name: `Hungary`
}),
new CountryDemographicEuropeItem(
{
population: 330000,
birthRate: 12.5,
deathRate: 6.6,
name: `Iceland`
}),
new CountryDemographicEuropeItem(
{
population: 4652000,
birthRate: 14.1,
deathRate: 6.5,
name: `Ireland`
}),
new CountryDemographicEuropeItem(
{
population: 60578000,
birthRate: 8,
deathRate: 10.7,
name: `Italy`
}),
new CountryDemographicEuropeItem(
{
population: 1998000,
birthRate: 11.1,
deathRate: 14.4,
name: `Latvia`
}),
new CountryDemographicEuropeItem(
{
population: 37000,
birthRate: 8.7,
deathRate: 6.7,
name: `Liechtenstein`
}),
new CountryDemographicEuropeItem(
{
population: 2932000,
birthRate: 10.8,
deathRate: 14.4,
name: `Lithuania`
}),
new CountryDemographicEuropeItem(
{
population: 567000,
birthRate: 10.7,
deathRate: 7,
name: `Luxembourg`
}),
new CountryDemographicEuropeItem(
{
population: 2079000,
birthRate: 11.3,
deathRate: 9.75,
name: `Macedonia`
}),
new CountryDemographicEuropeItem(
{
population: 434000,
birthRate: 10,
deathRate: 8,
name: `Malta`
}),
new CountryDemographicEuropeItem(
{
population: 4071000,
birthRate: 10.52,
deathRate: 11.42,
name: `Moldova`
}),
new CountryDemographicEuropeItem(
{
population: 38000,
birthRate: 8.1,
deathRate: 7.6,
name: `Monaco`
}),
new CountryDemographicEuropeItem(
{
population: 627000,
birthRate: 11.52,
deathRate: 9.8,
name: `Montenegro`
}),
new CountryDemographicEuropeItem(
{
population: 16938000,
birthRate: 10.1,
deathRate: 8.7,
name: `Netherlands`
}),
new CountryDemographicEuropeItem(
{
population: 5200000,
birthRate: 11.3,
deathRate: 7.8,
name: `Norway`
}),
new CountryDemographicEuropeItem(
{
population: 38034000,
birthRate: 9.7,
deathRate: 10.4,
name: `Poland`
}),
new CountryDemographicEuropeItem(
{
population: 10368000,
birthRate: 8.3,
deathRate: 10.5,
name: `Portugal`
}),
new CountryDemographicEuropeItem(
{
population: 19925000,
birthRate: 10,
deathRate: 13.2,
name: `Romania`
}),
new CountryDemographicEuropeItem(
{
population: 144984992,
birthRate: 13.3,
deathRate: 13,
name: `Russia`
}),
new CountryDemographicEuropeItem(
{
population: 33000,
birthRate: 8.2,
deathRate: 7.1,
name: `San Marino`
}),
new CountryDemographicEuropeItem(
{
population: 8877000,
birthRate: 9.3,
deathRate: 14.6,
name: `Serbia`
}),
new CountryDemographicEuropeItem(
{
population: 5436000,
birthRate: 10.3,
deathRate: 9.9,
name: `Slovakia`
}),
new CountryDemographicEuropeItem(
{
population: 2071000,
birthRate: 10,
deathRate: 9.6,
name: `Slovenia`
}),
new CountryDemographicEuropeItem(
{
population: 46672000,
birthRate: 9,
deathRate: 9.1,
name: `Spain`
}),
new CountryDemographicEuropeItem(
{
population: 9765000,
birthRate: 11.7,
deathRate: 9.3,
name: `Sweden`
}),
new CountryDemographicEuropeItem(
{
population: 8297000,
birthRate: 10.5,
deathRate: 8.2,
name: `Switzerland`
}),
new CountryDemographicEuropeItem(
{
population: 44922000,
birthRate: 10.7,
deathRate: 14.9,
name: `Ukraine`
}),
new CountryDemographicEuropeItem(
{
population: 65860000,
birthRate: 11.9,
deathRate: 9.2,
name: `United Kingdom`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrScatterSeries } from "@infragistics/igniteui-react-charts";
import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartScatterModule,
IgrDataChartScatterCoreModule,
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 xAxis: IgrNumericXAxis
private yAxis: IgrNumericYAxis
private scatterSeries1: IgrScatterSeries
private scatterSeries2: IgrScatterSeries
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">
Population Statistics for Selected Continents
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}>
<IgrNumericXAxis
name="xAxis"
title="Death Rate (per 1,000 people)"
minimumValue="5"
maximumValue="15">
</IgrNumericXAxis>
<IgrNumericYAxis
name="yAxis"
title="Birth Rate (per 1,000 people)"
minimumValue="0"
maximumValue="50"
interval="10">
</IgrNumericYAxis>
<IgrScatterSeries
name="scatterSeries1"
title="Europe"
xAxisName="xAxis"
yAxisName="yAxis"
xMemberPath="deathRate"
yMemberPath="birthRate"
dataSource={this.countryDemographicEurope}
markerType="Circle"
showDefaultTooltip="true">
</IgrScatterSeries>
<IgrScatterSeries
name="scatterSeries2"
title="Africa"
xAxisName="xAxis"
yAxisName="yAxis"
xMemberPath="deathRate"
yMemberPath="birthRate"
dataSource={this.countryDemographicAfrican}
markerType="Circle"
showDefaultTooltip="true">
</IgrScatterSeries>
</IgrDataChart>
</div>
</div>
);
}
private _countryDemographicEurope: CountryDemographicEurope = null;
public get countryDemographicEurope(): CountryDemographicEurope {
if (this._countryDemographicEurope == null)
{
this._countryDemographicEurope = new CountryDemographicEurope();
}
return this._countryDemographicEurope;
}
private _countryDemographicAfrican: CountryDemographicAfrican = null;
public get countryDemographicAfrican(): CountryDemographicAfrican {
if (this._countryDemographicAfrican == null)
{
this._countryDemographicAfrican = new CountryDemographicAfrican();
}
return this._countryDemographicAfrican;
}
}
// 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 シェープ チャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。シェープ チャートの詳細をご覧ください。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// axis' modules:
import { IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrNumericXAxis } from "@infragistics/igniteui-react-charts";
// series' modules:
import { IgrScatterPolygonSeries } from "@infragistics/igniteui-react-charts";
// data chart's modules:
import { IgrDataChart } from "@infragistics/igniteui-react-charts";
import { IgrDataChartCoreModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartShapeCoreModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartShapeModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrDataContext } from "@infragistics/igniteui-react-core";
import { IgrStyleShapeEventArgs } from "@infragistics/igniteui-react-charts";
IgrDataChartCoreModule.register();
IgrDataChartShapeCoreModule.register();
IgrDataChartShapeModule.register();
IgrDataChartInteractivityModule.register();
export default class DataChartTypeScatterPolygonSeries extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
shapes: undefined,
seats: undefined
}
fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json')
.then((response) => response.json())
.then((data) => this.setState({ shapes: data }));
fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json')
.then((response) => response.json())
.then((data) => this.setState({ seats: data }));
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="options horizontal">
<div className="legend-title">
<span>Airplane Seating Chart (Polygons)</span>
</div>
</div>
<div className="custom-legend">
<div><span style={{ background: "DodgerBlue" }}></span><label>First Class</label></div>
<div><span style={{ background: "LimeGreen" }}></span><label>Business Class</label></div>
<div><span style={{ background: "Orange" }}></span><label>Premium Class</label></div>
<div><span style={{ background: "Red" }}></span><label>Economy Class</label></div>
<div><span style={{ background: "Gray" }}></span><label>Sold Seat</label> </div>
<div><span style={{ background: "LightGray" }}></span><label>Airplane</label> </div>
</div>
<div className="container" >
<IgrDataChart
width="100%"
height="100%"
isHorizontalZoomEnabled={true}
isVerticalZoomEnabled={true}>
<IgrNumericXAxis
name="xAxis"
minimumValue={-1000}
maximumValue={1000}
interval={200} />
<IgrNumericYAxis
name="yAxis"
minimumValue={-600}
maximumValue={600}
interval={200} />
<IgrScatterPolygonSeries
name="airplaneShapeSeries"
xAxisName="xAxis"
yAxisName="yAxis"
shapeMemberPath="points"
dataSource={this.state.shapes}
showDefaultTooltip={false}
thickness={0.5}
brush="LightGray"
outline="Black"/>
<IgrScatterPolygonSeries
name="airplaneSeatSeries"
xAxisName="xAxis"
yAxisName="yAxis"
title="Airplane Seats"
shapeMemberPath="points"
dataSource={this.state.seats}
styleShape={this.onStylingShape}
tooltipTemplate={this.createTooltip}/>
</IgrDataChart>
</div>
</div>
);
}
private onStylingShape(sender: any, args: IgrStyleShapeEventArgs) {
args.shapeOpacity = 1.0;
args.shapeStrokeThickness = 0.5;
args.shapeStroke = 'Black';
args.shapeFill = 'White';
const itemRecord = args.item as any;
if (itemRecord.class === 'First') {
args.shapeFill = 'DodgerBlue';
}
if (itemRecord.class === 'Business') {
args.shapeFill = 'LimeGreen';
}
if (itemRecord.class === 'Premium') {
args.shapeFill = 'Orange';
}
if (itemRecord.class === 'Economy') {
args.shapeFill = 'Red';
}
if (itemRecord.status === 'Sold') {
args.shapeFill = 'Gray';
}
}
private createTooltip(context: any) {
const dataContext = context.dataContext as IgrDataContext;
if (!dataContext) return null;
const series = dataContext.series as any;
if (!series) return null;
const dataItem = dataContext.item as any;
if (!dataItem) return null;
return (
<div className='ui-tooltip-content'>
<div>Class: {dataItem.class}</div>
<div>Seat: {dataItem.seat}</div>
<div>Price: ${dataItem.price}</div>
<div>Status: {dataItem.status}</div>
</div>
);
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataChartTypeScatterPolygonSeries/>);
tsx
React スプライン チャート
React スプライン チャート、またはスプライン グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。React スプライン チャートは 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, IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule,
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: 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="Spline"
dataSource={this.countryRenewableElectricity}
legend={this.legend}
yAxisTitle="TWh"
isTransitionInEnabled="true"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
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 ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータ ポイントのコレクションを描画するカテゴリ チャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。React ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。React ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で 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, IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule,
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: 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}
legend={this.legend}
chartType="StepLine"
dataSource={this.countryRenewableElectricity}
includedProperties={["year", "europe", "china", "america"]}
isCategoryHighlightingEnabled="true"
isSeriesHighlightingEnabled="true"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
xAxisInterval="1"
yAxisTitle="TWh"
crosshairsSnapToData="true">
</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 ツリーマップ
Ignite UI for React ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。ツリーマップの詳細をご覧ください。
export class CountyHierarchicalDataItem {
public constructor(init: Partial<CountyHierarchicalDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
}
export class CountyHierarchicalData extends Array<CountyHierarchicalDataItem> {
public constructor(items: Array<CountyHierarchicalDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountyHierarchicalDataItem(
{
code: `AFC`,
parent: null,
name: `Africa`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `EUR`,
parent: null,
name: `Europe`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `MDE`,
parent: null,
name: `Middle East`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: null,
name: `Central America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: null,
name: `South America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `OCE`,
parent: null,
name: `Oceania`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ANG`,
parent: `Africa`,
name: `Angola`,
population: 19618432
}),
new CountyHierarchicalDataItem(
{
code: `BEN`,
parent: `Africa`,
name: `Benin`,
population: 9099922
}),
new CountyHierarchicalDataItem(
{
code: `BOT`,
parent: `Africa`,
name: `Botswana`,
population: 2030738
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burkina Faso`,
population: 16967845
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burundi`,
population: 8575172
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Africa`,
name: `Cameroon`,
population: 20030362
}),
new CountyHierarchicalDataItem(
{
code: `CPV`,
parent: `Africa`,
name: `Cape Verde`,
population: 500585
}),
new CountyHierarchicalDataItem(
{
code: `CAR`,
parent: `Africa`,
name: `Central African Republic`,
population: 4486837
}),
new CountyHierarchicalDataItem(
{
code: `CHD`,
parent: `Africa`,
name: `Chad`,
population: 11525496
}),
new CountyHierarchicalDataItem(
{
code: `COM`,
parent: `Africa`,
name: `Comoros`,
population: 753943
}),
new CountyHierarchicalDataItem(
{
code: `DRC`,
parent: `Africa`,
name: `Congo DRC`,
population: 67757577
}),
new CountyHierarchicalDataItem(
{
code: `CRP`,
parent: `Africa`,
name: `Congo Republic`,
population: 4139748
}),
new CountyHierarchicalDataItem(
{
code: `CIR`,
parent: `Africa`,
name: `Cote Ivoire`,
population: 20152894
}),
new CountyHierarchicalDataItem(
{
code: `DBT`,
parent: `Africa`,
name: `Djibouti`,
population: 905564
}),
new CountyHierarchicalDataItem(
{
code: `ETG`,
parent: `Africa`,
name: `Equatorial Guinea`,
population: 720213
}),
new CountyHierarchicalDataItem(
{
code: `ERT`,
parent: `Africa`,
name: `Eritrea`,
population: 5415280
}),
new CountyHierarchicalDataItem(
{
code: `ETH`,
parent: `Africa`,
name: `Ethiopia`,
population: 84734262
}),
new CountyHierarchicalDataItem(
{
code: `GBN`,
parent: `Africa`,
name: `Gabon`,
population: 1534262
}),
new CountyHierarchicalDataItem(
{
code: `GMB`,
parent: `Africa`,
name: `Gambia`,
population: 1776103
}),
new CountyHierarchicalDataItem(
{
code: `GHN`,
parent: `Africa`,
name: `Ghana`,
population: 24965816
}),
new CountyHierarchicalDataItem(
{
code: `GUN`,
parent: `Africa`,
name: `Guinea`,
population: 10221808
}),
new CountyHierarchicalDataItem(
{
code: `GNB`,
parent: `Africa`,
name: `Guinea-Bissau`,
population: 1547061
}),
new CountyHierarchicalDataItem(
{
code: `KEN`,
parent: `Africa`,
name: `Kenya`,
population: 41609728
}),
new CountyHierarchicalDataItem(
{
code: `LES`,
parent: `Africa`,
name: `Lesotho`,
population: 2193843
}),
new CountyHierarchicalDataItem(
{
code: `LBR`,
parent: `Africa`,
name: `Liberia`,
population: 4128572
}),
new CountyHierarchicalDataItem(
{
code: `MDG`,
parent: `Africa`,
name: `Madagascar`,
population: 21315135
}),
new CountyHierarchicalDataItem(
{
code: `MLW`,
parent: `Africa`,
name: `Malawi`,
population: 15380888
}),
new CountyHierarchicalDataItem(
{
code: `MAL`,
parent: `Africa`,
name: `Mali`,
population: 15839538
}),
new CountyHierarchicalDataItem(
{
code: `MRT`,
parent: `Africa`,
name: `Mauritania`,
population: 3541540
}),
new CountyHierarchicalDataItem(
{
code: `MUS`,
parent: `Africa`,
name: `Mauritius`,
population: 1286051
}),
new CountyHierarchicalDataItem(
{
code: `MOZ`,
parent: `Africa`,
name: `Mozambique`,
population: 23929708
}),
new CountyHierarchicalDataItem(
{
code: `NMB`,
parent: `Africa`,
name: `Namibia`,
population: 2324004
}),
new CountyHierarchicalDataItem(
{
code: `NER`,
parent: `Africa`,
name: `Niger`,
population: 16068994
}),
new CountyHierarchicalDataItem(
{
code: `NGA`,
parent: `Africa`,
name: `Nigeria`,
population: 162470737
}),
new CountyHierarchicalDataItem(
{
code: `RWD`,
parent: `Africa`,
name: `Rwanda`,
population: 10942950
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Africa`,
name: `Sao Tome`,
population: 168526
}),
new CountyHierarchicalDataItem(
{
code: `SEN`,
parent: `Africa`,
name: `Senegal`,
population: 12767556
}),
new CountyHierarchicalDataItem(
{
code: `SYC`,
parent: `Africa`,
name: `Seychelles`,
population: 86000
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Africa`,
name: `Sierra Leone`,
population: 5997486
}),
new CountyHierarchicalDataItem(
{
code: `ZAF`,
parent: `Africa`,
name: `South Africa`,
population: 50586757
}),
new CountyHierarchicalDataItem(
{
code: `SSD`,
parent: `Africa`,
name: `South Sudan`,
population: 10314021
}),
new CountyHierarchicalDataItem(
{
code: `SDN`,
parent: `Africa`,
name: `Sudan`,
population: 34318385
}),
new CountyHierarchicalDataItem(
{
code: `SWZ`,
parent: `Africa`,
name: `Swaziland`,
population: 1067773
}),
new CountyHierarchicalDataItem(
{
code: `TNZ`,
parent: `Africa`,
name: `Tanzania`,
population: 46218486
}),
new CountyHierarchicalDataItem(
{
code: `TOG`,
parent: `Africa`,
name: `Togo`,
population: 6154813
}),
new CountyHierarchicalDataItem(
{
code: `UGN`,
parent: `Africa`,
name: `Uganda`,
population: 34509205
}),
new CountyHierarchicalDataItem(
{
code: `ZMB`,
parent: `Africa`,
name: `Zambia`,
population: 13474959
}),
new CountyHierarchicalDataItem(
{
code: `ZWE`,
parent: `Africa`,
name: `Zimbabwe`,
population: 12754378
}),
new CountyHierarchicalDataItem(
{
code: `AFG`,
parent: `Asia`,
name: `Afghanistan`,
population: 35320445
}),
new CountyHierarchicalDataItem(
{
code: `BAN`,
parent: `Asia`,
name: `Bangladesh`,
population: 150493658
}),
new CountyHierarchicalDataItem(
{
code: `BHT`,
parent: `Asia`,
name: `Bhutan`,
population: 738267
}),
new CountyHierarchicalDataItem(
{
code: `BRN`,
parent: `Asia`,
name: `Brunei`,
population: 405938
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Asia`,
name: `Cambodia`,
population: 14305183
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1344130000
}),
new CountyHierarchicalDataItem(
{
code: `HNK`,
parent: `Asia`,
name: `Hong Kong`,
population: 7071600
}),
new CountyHierarchicalDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1241491960
}),
new CountyHierarchicalDataItem(
{
code: `IDN`,
parent: `Asia`,
name: `Indonesia`,
population: 242325638
}),
new CountyHierarchicalDataItem(
{
code: `JPN`,
parent: `Asia`,
name: `Japan`,
population: 127817277
}),
new CountyHierarchicalDataItem(
{
code: `KZH`,
parent: `Asia`,
name: `Kazakhstan`,
population: 16558676
}),
new CountyHierarchicalDataItem(
{
code: `NKO`,
parent: `Asia`,
name: `North Korea`,
population: 24451285
}),
new CountyHierarchicalDataItem(
{
code: `SKO`,
parent: `Asia`,
name: `South Korea`,
population: 49779000
}),
new CountyHierarchicalDataItem(
{
code: `KGZ`,
parent: `Asia`,
name: `Kyrgyzstan`,
population: 5514600
}),
new CountyHierarchicalDataItem(
{
code: `LAO`,
parent: `Asia`,
name: `Lao PDR`,
population: 6288037
}),
new CountyHierarchicalDataItem(
{
code: `MAC`,
parent: `Asia`,
name: `Macao`,
population: 555731
}),
new CountyHierarchicalDataItem(
{
code: `MYS`,
parent: `Asia`,
name: `Malaysia`,
population: 28859154
}),
new CountyHierarchicalDataItem(
{
code: `MDV`,
parent: `Asia`,
name: `Maldives`,
population: 320081
}),
new CountyHierarchicalDataItem(
{
code: `MNG`,
parent: `Asia`,
name: `Mongolia`,
population: 2800114
}),
new CountyHierarchicalDataItem(
{
code: `MYM`,
parent: `Asia`,
name: `Myanmar`,
population: 48336763
}),
new CountyHierarchicalDataItem(
{
code: `NPL`,
parent: `Asia`,
name: `Nepal`,
population: 30485798
}),
new CountyHierarchicalDataItem(
{
code: `PHP`,
parent: `Asia`,
name: `Philippines`,
population: 94852030
}),
new CountyHierarchicalDataItem(
{
code: `SNG`,
parent: `Asia`,
name: `Singapore`,
population: 5183700
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Asia`,
name: `Sri Lanka`,
population: 20869000
}),
new CountyHierarchicalDataItem(
{
code: `TKS`,
parent: `Asia`,
name: `Tajikistan`,
population: 6976958
}),
new CountyHierarchicalDataItem(
{
code: `THL`,
parent: `Asia`,
name: `Thailand`,
population: 69518555
}),
new CountyHierarchicalDataItem(
{
code: `TRK`,
parent: `Asia`,
name: `Turkmenistan`,
population: 5105301
}),
new CountyHierarchicalDataItem(
{
code: `UZB`,
parent: `Asia`,
name: `Uzbekistan`,
population: 29341200
}),
new CountyHierarchicalDataItem(
{
code: `VTN`,
parent: `Asia`,
name: `Vietnam`,
population: 87840000
}),
new CountyHierarchicalDataItem(
{
code: `ANT`,
parent: `Central America`,
name: `Antigua`,
population: 89612
}),
new CountyHierarchicalDataItem(
{
code: `ARB`,
parent: `Central America`,
name: `Aruba`,
population: 108141
}),
new CountyHierarchicalDataItem(
{
code: `BHM`,
parent: `Central America`,
name: `Bahamas`,
population: 347176
}),
new CountyHierarchicalDataItem(
{
code: `BRB`,
parent: `Central America`,
name: `Barbados`,
population: 273925
}),
new CountyHierarchicalDataItem(
{
code: `BLZ`,
parent: `Central America`,
name: `Belize`,
population: 356600
}),
new CountyHierarchicalDataItem(
{
code: `BRM`,
parent: `Central America`,
name: `Bermuda`,
population: 64700
}),
new CountyHierarchicalDataItem(
{
code: `CYI`,
parent: `Central America`,
name: `Cayman Islands`,
population: 56729
}),
new CountyHierarchicalDataItem(
{
code: `CSR`,
parent: `Central America`,
name: `Costa Rica`,
population: 4726575
}),
new CountyHierarchicalDataItem(
{
code: `CUB`,
parent: `Central America`,
name: `Cuba`,
population: 11253665
}),
new CountyHierarchicalDataItem(
{
code: `CUR`,
parent: `Central America`,
name: `Curacao`,
population: 145619
}),
new CountyHierarchicalDataItem(
{
code: `DMA`,
parent: `Central America`,
name: `Dominica`,
population: 67675
}),
new CountyHierarchicalDataItem(
{
code: `DOM`,
parent: `Central America`,
name: `Dominican Republic`,
population: 10056181
}),
new CountyHierarchicalDataItem(
{
code: `SLV`,
parent: `Central America`,
name: `El Salvador`,
population: 6227491
}),
new CountyHierarchicalDataItem(
{
code: `FIS`,
parent: `Central America`,
name: `Faeroe Islands`,
population: 48863
}),
new CountyHierarchicalDataItem(
{
code: `GND`,
parent: `Central America`,
name: `Grenada`,
population: 104890
}),
new CountyHierarchicalDataItem(
{
code: `GUA`,
parent: `Central America`,
name: `Guam`,
population: 182111
}),
new CountyHierarchicalDataItem(
{
code: `GTM`,
parent: `Central America`,
name: `Guatemala`,
population: 14757316
}),
new CountyHierarchicalDataItem(
{
code: `HAT`,
parent: `Central America`,
name: `Haiti`,
population: 10123787
}),
new CountyHierarchicalDataItem(
{
code: `HON`,
parent: `Central America`,
name: `Honduras`,
population: 7754687
}),
new CountyHierarchicalDataItem(
{
code: `JAM`,
parent: `Central America`,
name: `Jamaica`,
population: 2706500
}),
new CountyHierarchicalDataItem(
{
code: `NCR`,
parent: `Central America`,
name: `Nicaragua`,
population: 5869859
}),
new CountyHierarchicalDataItem(
{
code: `NMI`,
parent: `Central America`,
name: `Northern Mariana Islands`,
population: 61174
}),
new CountyHierarchicalDataItem(
{
code: `PAN`,
parent: `Central America`,
name: `Panama`,
population: 3571185
}),
new CountyHierarchicalDataItem(
{
code: `PRT`,
parent: `Central America`,
name: `Puerto Rico`,
population: 3706690
}),
new CountyHierarchicalDataItem(
{
code: `STK`,
parent: `Central America`,
name: `St. Kitts`,
population: 53051
}),
new CountyHierarchicalDataItem(
{
code: `STL`,
parent: `Central America`,
name: `St. Lucia`,
population: 176000
}),
new CountyHierarchicalDataItem(
{
code: `STV`,
parent: `Central America`,
name: `St. Vincent`,
population: 109365
}),
new CountyHierarchicalDataItem(
{
code: `TAB`,
parent: `Central America`,
name: `Trinidad and Tobago`,
population: 1346350
}),
new CountyHierarchicalDataItem(
{
code: `RCI`,
parent: `Central America`,
name: `Turks and Caicos Islands`,
population: 39184
}),
new CountyHierarchicalDataItem(
{
code: `ISV`,
parent: `Central America`,
name: `US Virgin Islands`,
population: 109666
}),
new CountyHierarchicalDataItem(
{
code: `ALB`,
parent: `Europe`,
name: `Albania`,
population: 3215988
}),
new CountyHierarchicalDataItem(
{
code: `AND`,
parent: `Europe`,
name: `Andorra`,
population: 86165
}),
new CountyHierarchicalDataItem(
{
code: `ARM`,
parent: `Europe`,
name: `Armenia`,
population: 3100236
}),
new CountyHierarchicalDataItem(
{
code: `AUT`,
parent: `Europe`,
name: `Austria`,
population: 8423635
}),
new CountyHierarchicalDataItem(
{
code: `BER`,
parent: `Europe`,
name: `Belarus`,
population: 9473000
}),
new CountyHierarchicalDataItem(
{
code: `BEL`,
parent: `Europe`,
name: `Belgium`,
population: 11020952
}),
new CountyHierarchicalDataItem(
{
code: `BIH`,
parent: `Europe`,
name: `Bosnia`,
population: 3752228
}),
new CountyHierarchicalDataItem(
{
code: `BUL`,
parent: `Europe`,
name: `Bulgaria`,
population: 7348328
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Europe`,
name: `Channel Islands`,
population: 153876
}),
new CountyHierarchicalDataItem(
{
code: `CRO`,
parent: `Europe`,
name: `Croatia`,
population: 4403000
}),
new CountyHierarchicalDataItem(
{
code: `CYP`,
parent: `Europe`,
name: `Cyprus`,
population: 1116564
}),
new CountyHierarchicalDataItem(
{
code: `CZE`,
parent: `Europe`,
name: `Czechia`,
population: 10496088
}),
new CountyHierarchicalDataItem(
{
code: `DEN`,
parent: `Europe`,
name: `Denmark`,
population: 5570572
}),
new CountyHierarchicalDataItem(
{
code: `EST`,
parent: `Europe`,
name: `Estonia`,
population: 1339928
}),
new CountyHierarchicalDataItem(
{
code: `FIN`,
parent: `Europe`,
name: `Finland`,
population: 5388272
}),
new CountyHierarchicalDataItem(
{
code: `FRA`,
parent: `Europe`,
name: `France`,
population: 65433714
}),
new CountyHierarchicalDataItem(
{
code: `GEO`,
parent: `Europe`,
name: `Georgia`,
population: 4486000
}),
new CountyHierarchicalDataItem(
{
code: `DEU`,
parent: `Europe`,
name: `Germany`,
population: 81797673
}),
new CountyHierarchicalDataItem(
{
code: `GRC`,
parent: `Europe`,
name: `Greece`,
population: 11300410
}),
new CountyHierarchicalDataItem(
{
code: `HUN`,
parent: `Europe`,
name: `Hungary`,
population: 9971727
}),
new CountyHierarchicalDataItem(
{
code: `ICE`,
parent: `Europe`,
name: `Iceland`,
population: 319014
}),
new CountyHierarchicalDataItem(
{
code: `IRE`,
parent: `Europe`,
name: `Ireland`,
population: 4576317
}),
new CountyHierarchicalDataItem(
{
code: `IOM`,
parent: `Europe`,
name: `Isle of Man`,
population: 83327
}),
new CountyHierarchicalDataItem(
{
code: `ITA`,
parent: `Europe`,
name: `Italy`,
population: 60723603
}),
new CountyHierarchicalDataItem(
{
code: `KOS`,
parent: `Europe`,
name: `Kosovo`,
population: 1802765
}),
new CountyHierarchicalDataItem(
{
code: `LAT`,
parent: `Europe`,
name: `Latvia`,
population: 2058184
}),
new CountyHierarchicalDataItem(
{
code: `LVA`,
parent: `Europe`,
name: `Liechtenstein`,
population: 36304
}),
new CountyHierarchicalDataItem(
{
code: `LTU`,
parent: `Europe`,
name: `Lithuania`,
population: 3030173
}),
new CountyHierarchicalDataItem(
{
code: `LUX`,
parent: `Europe`,
name: `Luxembourg`,
population: 518252
}),
new CountyHierarchicalDataItem(
{
code: `MKD`,
parent: `Europe`,
name: `North Macedonia`,
population: 2063893
}),
new CountyHierarchicalDataItem(
{
code: `MLT`,
parent: `Europe`,
name: `Malta`,
population: 415654
}),
new CountyHierarchicalDataItem(
{
code: `MDA`,
parent: `Europe`,
name: `Moldova`,
population: 3559000
}),
new CountyHierarchicalDataItem(
{
code: `MON`,
parent: `Europe`,
name: `Monaco`,
population: 35427
}),
new CountyHierarchicalDataItem(
{
code: `MNE`,
parent: `Europe`,
name: `Montenegro`,
population: 632261
}),
new CountyHierarchicalDataItem(
{
code: `MLD`,
parent: `Europe`,
name: `Netherlands`,
population: 16693074
}),
new CountyHierarchicalDataItem(
{
code: `NOR`,
parent: `Europe`,
name: `Norway`,
population: 4953088
}),
new CountyHierarchicalDataItem(
{
code: `POL`,
parent: `Europe`,
name: `Poland`,
population: 38534157
}),
new CountyHierarchicalDataItem(
{
code: `POR`,
parent: `Europe`,
name: `Portugal`,
population: 10556999
}),
new CountyHierarchicalDataItem(
{
code: `ROM`,
parent: `Europe`,
name: `Romania`,
population: 21384832
}),
new CountyHierarchicalDataItem(
{
code: `RUS`,
parent: `Europe`,
name: `Russia`,
population: 142960000
}),
new CountyHierarchicalDataItem(
{
code: `SMR`,
parent: `Europe`,
name: `San Marino`,
population: 31735
}),
new CountyHierarchicalDataItem(
{
code: `SBR`,
parent: `Europe`,
name: `Serbia`,
population: 7258745
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `Sint Maarten`,
population: 36609
}),
new CountyHierarchicalDataItem(
{
code: `SVK`,
parent: `Europe`,
name: `Slovakia`,
population: 5398384
}),
new CountyHierarchicalDataItem(
{
code: `SLO`,
parent: `Europe`,
name: `Slovenia`,
population: 2052843
}),
new CountyHierarchicalDataItem(
{
code: `ESP`,
parent: `Europe`,
name: `Spain`,
population: 46174601
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `St. Martin`,
population: 30615
}),
new CountyHierarchicalDataItem(
{
code: `SWE`,
parent: `Europe`,
name: `Sweden`,
population: 9449213
}),
new CountyHierarchicalDataItem(
{
code: `CHE`,
parent: `Europe`,
name: `Switzerland`,
population: 7912398
}),
new CountyHierarchicalDataItem(
{
code: `UKR`,
parent: `Europe`,
name: `Ukraine`,
population: 45706100
}),
new CountyHierarchicalDataItem(
{
code: `GBR`,
parent: `Europe`,
name: `United Kingdom`,
population: 62744081
}),
new CountyHierarchicalDataItem(
{
code: `DZA`,
parent: `Middle East`,
name: `Algeria`,
population: 35980193
}),
new CountyHierarchicalDataItem(
{
code: `AZE`,
parent: `Middle East`,
name: `Azerbaijan`,
population: 9173082
}),
new CountyHierarchicalDataItem(
{
code: `BHR`,
parent: `Middle East`,
name: `Bahrain`,
population: 1323535
}),
new CountyHierarchicalDataItem(
{
code: `EGY`,
parent: `Middle East`,
name: `Egypt`,
population: 82536770
}),
new CountyHierarchicalDataItem(
{
code: `IRN`,
parent: `Middle East`,
name: `Iran`,
population: 74798599
}),
new CountyHierarchicalDataItem(
{
code: `IRQ`,
parent: `Middle East`,
name: `Iraq`,
population: 32961959
}),
new CountyHierarchicalDataItem(
{
code: `ISR`,
parent: `Middle East`,
name: `Israel`,
population: 7765900
}),
new CountyHierarchicalDataItem(
{
code: `JOR`,
parent: `Middle East`,
name: `Jordan`,
population: 6181000
}),
new CountyHierarchicalDataItem(
{
code: `KWT`,
parent: `Middle East`,
name: `Kuwait`,
population: 2818042
}),
new CountyHierarchicalDataItem(
{
code: `LBN`,
parent: `Middle East`,
name: `Lebanon`,
population: 4259405
}),
new CountyHierarchicalDataItem(
{
code: `LBY`,
parent: `Middle East`,
name: `Libya`,
population: 6422772
}),
new CountyHierarchicalDataItem(
{
code: `MAR`,
parent: `Middle East`,
name: `Morocco`,
population: 32272974
}),
new CountyHierarchicalDataItem(
{
code: `OMN`,
parent: `Middle East`,
name: `Oman`,
population: 2846145
}),
new CountyHierarchicalDataItem(
{
code: `PKS`,
parent: `Middle East`,
name: `Pakistan`,
population: 176745364
}),
new CountyHierarchicalDataItem(
{
code: `QTR`,
parent: `Middle East`,
name: `Qatar`,
population: 1870041
}),
new CountyHierarchicalDataItem(
{
code: `SAR`,
parent: `Middle East`,
name: `Saudi Arabia`,
population: 28082541
}),
new CountyHierarchicalDataItem(
{
code: `SOM`,
parent: `Middle East`,
name: `Somalia`,
population: 9556873
}),
new CountyHierarchicalDataItem(
{
code: `SYR`,
parent: `Middle East`,
name: `Syria`,
population: 20820311
}),
new CountyHierarchicalDataItem(
{
code: `TUN`,
parent: `Middle East`,
name: `Tunisia`,
population: 10673800
}),
new CountyHierarchicalDataItem(
{
code: `TUR`,
parent: `Middle East`,
name: `Turkey`,
population: 73639596
}),
new CountyHierarchicalDataItem(
{
code: `UAE`,
parent: `Middle East`,
name: `United Arab Emirates`,
population: 7890924
}),
new CountyHierarchicalDataItem(
{
code: `WTB`,
parent: `Middle East`,
name: `West Bank`,
population: 3927051
}),
new CountyHierarchicalDataItem(
{
code: `YEM`,
parent: `Middle East`,
name: `Yemen`,
population: 24799880
}),
new CountyHierarchicalDataItem(
{
code: `CAN`,
parent: `North America`,
name: `Canada`,
population: 34483975
}),
new CountyHierarchicalDataItem(
{
code: `GRL`,
parent: `North America`,
name: `Greenland`,
population: 56840
}),
new CountyHierarchicalDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 114793341
}),
new CountyHierarchicalDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 311591917
}),
new CountyHierarchicalDataItem(
{
code: `AMS`,
parent: `Oceania`,
name: `American Samoa`,
population: 69543
}),
new CountyHierarchicalDataItem(
{
code: `AUS`,
parent: `Oceania`,
name: `Australia`,
population: 22323900
}),
new CountyHierarchicalDataItem(
{
code: `FIJ`,
parent: `Oceania`,
name: `Fiji`,
population: 868406
}),
new CountyHierarchicalDataItem(
{
code: `FRP`,
parent: `Oceania`,
name: `French Polynesia`,
population: 273777
}),
new CountyHierarchicalDataItem(
{
code: `KIR`,
parent: `Oceania`,
name: `Kiribati`,
population: 101093
}),
new CountyHierarchicalDataItem(
{
code: `MIS`,
parent: `Oceania`,
name: `Marshall Islands`,
population: 54816
}),
new CountyHierarchicalDataItem(
{
code: `MCR`,
parent: `Oceania`,
name: `Micronesia`,
population: 111542
}),
new CountyHierarchicalDataItem(
{
code: `NCD`,
parent: `Oceania`,
name: `New Caledonia`,
population: 254024
}),
new CountyHierarchicalDataItem(
{
code: `NZL`,
parent: `Oceania`,
name: `New Zealand`,
population: 4405200
}),
new CountyHierarchicalDataItem(
{
code: `PAL`,
parent: `Oceania`,
name: `Palau`,
population: 20609
}),
new CountyHierarchicalDataItem(
{
code: `PNG`,
parent: `Oceania`,
name: `Papua New Guinea`,
population: 7013829
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: `Oceania`,
name: `Samoa`,
population: 183874
}),
new CountyHierarchicalDataItem(
{
code: `SIS`,
parent: `Oceania`,
name: `Solomon Islands`,
population: 552267
}),
new CountyHierarchicalDataItem(
{
code: `TML`,
parent: `Oceania`,
name: `Timor-Leste`,
population: 1175880
}),
new CountyHierarchicalDataItem(
{
code: `TON`,
parent: `Oceania`,
name: `Tonga`,
population: 104509
}),
new CountyHierarchicalDataItem(
{
code: `TUV`,
parent: `Oceania`,
name: `Tuvalu`,
population: 9847
}),
new CountyHierarchicalDataItem(
{
code: `VNT`,
parent: `Oceania`,
name: `Vanuatu`,
population: 245619
}),
new CountyHierarchicalDataItem(
{
code: `ARG`,
parent: `South America`,
name: `Argentina`,
population: 40764561
}),
new CountyHierarchicalDataItem(
{
code: `BOL`,
parent: `South America`,
name: `Bolivia`,
population: 10088108
}),
new CountyHierarchicalDataItem(
{
code: `BRA`,
parent: `South America`,
name: `Brazil`,
population: 196655014
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `South America`,
name: `Chile`,
population: 17269525
}),
new CountyHierarchicalDataItem(
{
code: `COL`,
parent: `South America`,
name: `Colombia`,
population: 46927125
}),
new CountyHierarchicalDataItem(
{
code: `ECU`,
parent: `South America`,
name: `Ecuador`,
population: 14666055
}),
new CountyHierarchicalDataItem(
{
code: `GUY`,
parent: `South America`,
name: `Guyana`,
population: 756040
}),
new CountyHierarchicalDataItem(
{
code: `PAR`,
parent: `South America`,
name: `Paraguay`,
population: 6568290
}),
new CountyHierarchicalDataItem(
{
code: `PER`,
parent: `South America`,
name: `Peru`,
population: 29399817
}),
new CountyHierarchicalDataItem(
{
code: `SUR`,
parent: `South America`,
name: `Suriname`,
population: 529419
}),
new CountyHierarchicalDataItem(
{
code: `URG`,
parent: `South America`,
name: `Uruguay`,
population: 3368595
}),
new CountyHierarchicalDataItem(
{
code: `VEN`,
parent: `South America`,
name: `Venezuela`,
population: 29278000
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTreemapModule } from "@infragistics/igniteui-react-charts";
import { IgrTreemap } from "@infragistics/igniteui-react-charts";
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
const mods: any[] = [
IgrTreemapModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treemap: IgrTreemap
private treemapRef(r: IgrTreemap) {
this.treemap = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.treemapRef = this.treemapRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Comparing Population of Countries
</div>
<div className="container fill">
<IgrTreemap
ref={this.treemapRef}
dataSource={this.countyHierarchicalData}
parentIdMemberPath="parent"
idMemberPath="name"
labelMemberPath="name"
valueMemberPath="population"
fillScaleMode="Value"
fillScaleMinimumValue="0"
fillScaleMaximumValue="1500000000"
fillBrushes="rgba(78, 98, 207, 1) rgba(138, 88, 214, 1)"
isFillScaleLogarithmic="true"
rootTitle="Countries"
headerDisplayMode="Overlay"
parentNodeBottomPadding="0"
parentNodeLeftPadding="0"
parentNodeRightPadding="0"
parentNodeTopPadding="0"
outline="black"
strokeThickness="1">
</IgrTreemap>
</div>
</div>
);
}
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
}
// 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 チャート主な機能
組み込みの時間軸を使用して、データが時間の経過とともにどのように変化するかを示します。チャートを操作すると、時間スケールとラベル書式が動的に変更されます。YahooFinance や GoogleFinance など、ファイナンシャル チャートに期待されるすべての機能を備えた完全なファイナンシャル チャートが含まれています。
動的なチャート
新しい複合チャートを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。
カスタム ツールチップ
新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータ バインディングを使用してカスタム ツールチップを作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。
リアルタイムの高パフォーマンスなチャート
ライブのストリーミング データを使用して、ミリ秒レベルの更新で数千のデータ ポイントをリアルタイムで表示します。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、高頻度のチャートトピックを参照してください。
大量のデータ処理
チャート パフォーマンスを最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータ ポイントを描画します。デモについては、大量データのチャートトピックを参照してください。
モジュラー デザイン
Reactチャート は、モジュール性のために設計されています。必要な機能のみが展開一部であるため、描画されたページで可能な限り最小のフットプリントを取得します。
スマート データ バインディング
チャート タイプの選択はお任せください。当社のスマート データ アダプタは、データに最適なチャート タイプを自動的に選択します。データ ソースを設定するだけです。
トレンドライン
React チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべてのトレンドラインをサポートします。
インタラクティブなパニングとズーム
シングル タッチまたはマルチタッチ、キーボード、ズーム バー、マウス ホイールを使用し、マウスで任意の長方形領域をドラッグ選択してズームインし、データ ポイントのクローズアップ、データ履歴のスクロール、またはデータ領域のパンを行います。
マーカー、ツールチップ、およびテンプレート
10 個のマーカー タイプのいずれかを使用するか、独自のマーカー-テンプレートを作成して、データをハイライト表示するか、シンプルなツールチップまたはカスタム ツールチップを使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
その他の詳細
他の React チャートを検討している場合は、次のことを考慮しましょう:
- 65 を超える React チャート タイプと複合チャートが含まれており、スマート データ アダプタを使用した類を見ない最も簡単な構成が可能です。
- チャートは、Angular、Blazor、jQuery / JavaScript、React、UNO、UWP、WPF、Windows Forms、WebComponents、WinUI、Xamarin などのすべてのプラットフォームで最適化されています。すべてのプラットフォームで同じ API と機能をサポートします。
- 当社の株価チャートとファイナンシャル チャートは、YahooFinance または Google Finance のようなエクスペリエンスに必要なすべてを 1 行のコードで提供します。
- Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
- 他社のパフォーマンスに対してテストします。当社は高速で大量のデータを処理できることを証明できます。大量のデータとリアルタイムのデータ ストリーミングをどのように処理するかをご自身で確認してください。
- 24/5 対応しております。インフラジスティックスは、常にオンラインでグローバル サポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。
- チャートの他に、React には多くの UI コントロールもあります。アプリケーション構築のための完全な React ソリューションを提供します!
API リファレンス
このトピックで言及されているすべてのチャート タイプは、次の API コンポーネントに実装されています: