Angular 散布図 - エリア シリーズ
このトピックは、コード例を示して Angular データ チャート コンポーネントで IgxScatterAreaSeriesComponent を使用する方法を説明します。このシリーズは、各ポイントに数値が割り当てられた X および Y データの三角測量に基づいて色付きの表面を描画します。このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgxScatterAreaSeriesComponent は IgxScatterContourSeriesComponent と同様ですが、同じ値を持つデータポイントを接続する等線の置換に補完で色つきサーフェス エリアとしてデータを表します。
サンプル
軸の要件
Angular データ チャート コンポーネントにはさまざまな種類の軸がありますが、IgxScatterAreaSeriesComponent では IgxNumericYAxisComponent と IgxNumericYAxisComponent のみ使用できます。
データの要件
IgxScatterAreaSeriesComponent には以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートに散布シェイプ シリーズを描画しません。
- すべてのデータ項目には、
xMemberPath、yMemberPath、そしてcolorMemberPathプロパティにマップされる 3 つの数値データ列を含める必要があります。
上記データ要件を満たすデータソースとして SamplePolarData を使用できます。
public dataSource: any[] = SampleScatterData.create();
モジュールの要件
散布エリア シリーズを作成するには、以下のモジュールが必要です。 モジュールはアプリケーションのエントリ ポイントに登録する必要があります。
- DataChartCoreModule
- DataChartScatterCoreModule
- DataChartScatterModule
- DataChartInteractivityModule
- ScatterAreaSeriesModule
// axis' modules:
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxNumericXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxScatterAreaSeries } from 'igniteui-angular-charts';
import { IgxCustomPaletteColorScale } from 'igniteui-angular-charts';
import { ColorScaleInterpolationMode } from 'igniteui-angular-charts';
// data chart's modules:
import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartScatterCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartScatterModule } from 'igniteui-angular-charts';
@NgModule({
imports: [
// ...
IgxDataChartCoreModule,
IgxDataChartScatterCoreModule,
IgxDataChartScatterModule,
]
})
export class AppModule { /* ... */ }
コード例
このコードは、IgxScatterAreaSeriesComponent でデータチャートのインスタンスを作成し、データソースにバインドする方法を説明します。
<igx-data-chart
[dataSource]="dataSource"
width="700px"
height="500px">
<igx-numeric-x-axis name="xAxis"></igx-numeric-x-axis>
<igx-numeric-y-axis name="yAxis"></igx-numeric-y-axis>
<igx-scatter-area-series
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
xMemberPath="X"
yMemberPath="Y"
colorMemberPath="Z">
</igx-scatter-area-series>
</igx-data-chart>
カラー スケール
IgxScatterAreaSeriesComponent の colorScale プロパティを使用して、ポイントの値を解決し、シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。
提供されている IgxCustomPaletteColorScaleComponent クラスはほとんどの色付けのニーズを満たすはずですが、colorScale 抽象クラスから継承して独自の色付けのロジックを指定することができます。
以下の表は IgxScatterAreaSeriesComponent の面のカラ―リングに影響する IgxCustomPaletteColorScaleComponent プロパティをリストします。
paletteは、選択する、または補間する色のコレクションを設定します。interpolationModeは、パレットから色を取得するメソッドを設定します。maximumValueは、色を割り当てるための最大値を設定します。指定した値がこの値より大きい場合は透明になります。minimumValueは、色を割り当てるための最小値を設定します。指定した値がこの値より小さい場合は透明になります。
