React 散布図 - エリア シリーズ

このトピックは、コード例を示して React データ チャート コンポーネントで IgrScatterAreaSeries を使用する方法を説明します。このシリーズは、各ポイントに数値が割り当てられた X および Y データの三角測量に基づいて色付きの表面を描画します。このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgrScatterAreaSeriesIgrScatterContourSeries と同様ですが、同じ値を持つデータポイントを接続する等線の置換に補完で色つきサーフェス エリアとしてデータを表します。

React 散布図 - エリア シリーズの例

Edit on CodeSandbox

軸の要件

React データ チャート コンポーネントにはさまざまな種類の軸がありますが、IgrScatterAreaSeries では IgrNumericYAxisIgrNumericYAxis のみ使用できます。

データの要件

IgrScatterAreaSeries には以下のデータ要件があります。

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートに散布シェイプ シリーズを描画しません。
  • すべてのデータ項目には、xMemberPathyMemberPath、そして colorMemberPath プロパティにマップされる 3 つの数値データ列を含める必要があります。

上記データ要件を満たすデータソースとして SamplePolarData を使用できます。

public dataSource: any[] = SampleScatterData.create();

モジュールの要件

散布エリア シリーズを作成するには、以下のモジュールが必要です。

// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrScatterAreaSeries } from 'igniteui-react-charts';
import { IgrCustomPaletteColorScale } from 'igniteui-react-charts';
import { ColorScaleInterpolationMode } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartScatterCoreModule } from 'igniteui-react-charts';
import { IgrDataChartScatterModule } from 'igniteui-react-charts';

// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartScatterCoreModule.register();
IgrDataChartScatterModule.register();

コード例

このコードは、IgrScatterAreaSeries でデータ チャートのインスタンスを作成し、データソースにバインドする方法を説明します。

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="500px"
    height="500px">
    {/* axes */}
    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />
    {/* series: */}
    <IgrScatterAreaSeries
     name="series1"
     xAxisName="xAxis"
     yAxisName="yAxis"
     xMemberPath="X"
     yMemberPath="Y"
     colorMemberPath="Z" />
 </IgrDataChart>
const xAxis = new IgrNumericXAxis({ name: "xAxis" });
const yAxis = new IgrNumericYAxis({ name: "yAxis" });

const series1 = new IgrScatterAreaSeries({ name: "series1" });
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
series1.xMemberPath = "X";
series1.yMemberPath = "Y";
series1.colorMemberPath = "Z";

this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleShapeData.create();
this.chart.axes.add(yAxis);
this.chart.axes.add(xAxis);
this.chart.series.add(series1);

カラー スケール

IgrScatterAreaSeriescolorScale プロパティを使用して、ポイントの値を解決し、シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。

提供されている IgrCustomPaletteColorScale クラスはほとんどの色付けのニーズを満たすはずですが、colorScale 抽象クラスから継承して独自の色付けのロジックを指定することができます。

以下の表は IgrScatterAreaSeries の面のカラ―リングに影響する IgrCustomPaletteColorScale プロパティをリストします。

  • palette は、選択する、または補間する色のコレクションを設定します。
  • interpolationMode は、パレットから色を取得するメソッドを設定します。
  • maximumValue は、色を割り当てるための最大値を設定します。指定した値がこの値より大きい場合は透明になります。
  • minimumValue は、色を割り当てるための最小値を設定します。指定した値がこの値より小さい場合は透明になります。
const scale = new IgrCustomPaletteColorScale({});
scale.minimumValue = -2;
scale.maximumValue = 2;
scale.interpolationMode = ColorScaleInterpolationMode.Interpolate;
scale.palette = [
    "#8670CB", "#513E8C", "#003F5E",
    "#0C6B99", "#4AC4FF", "#B5CC2E",
    "#FFD034", "#FC8612", "#ED4840"
];

const series1 = new IgrScatterAreaSeries({ name: "series1" });
series1.colorMemberPath = "Z";
series1.colorScale = scale;

その他のリソース