散布エリア シリーズの構成 (igDataChart)

トピックの概要

目的

このトピックでは、igDataChart コントロールで散布エリア シリーズ要素を使用する方法を提供します。

前提条件

以下のトピックを事前に読んでおくことをお勧めします。

• igDataChart の追加: このトピックでは、igDataChart™ コントロールをページに追加し、データにバインドする方法を紹介します。

• igDataChart をデータにバインド: このトピックでは、igDataChart™ コントロールを各種データ ソース (JavaScript 配列、IQueryable<T>、Web サービス) にバインドする方法について説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
  • プレビュー
• データ要件
• データ バインディング
• カラー スケール
• 例
• 関連コンテンツ
  • トピック

概要

igDataChart コントロールで、散布エリア シリーズは各ポイントに割り当てられた数値を使って、X および Y データの三角測量に基づいて、色付きのサーフェスを描画します。

このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの WIFI の強さを描画する場合などに便利です。散布エリア シリーズは散布等高線シリーズと同様ですが、同じ値を持つデータ ポイントを接続する等高線の代わりに補間で色つきサーフェス エリアとしてデータを表します。

プレビュー

以下は、3D サーフェス データをプロットする散布エリア シリーズを持つ igDataChart コントロールのプレビューです。Z 軸は、サーフェスの色の変更として描画されます。より低い Z 値は青色で、より高い値は赤色になります。

データ要件

igDataChart コントロールのシリーズの他のタイプと同様、散布エリア シリーズには、データ バインディングのための dataSource オプションがあります。このオプションは配列に設定することができます。配列の各項目には、ポイント位置を保存する 2 つのデータ列が必要です (X と Y に各 1 列)。このデータ列は、xMemberPath および yMemberPath オプションにマップされます。データには各ポイントの値を保存するデータ列も 1 列必要です。この値はシリーズにサーフェスの色を設定するために使用されます。この値列は、colorMemberPath オプションにマップされます。

データ バインディング

以下の表は、データ バインドに使用される散布エリア シリーズ オプションの概要です。

カラー スケール

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

以下の表は、散布エリア シリーズのサーフェスの色付けに関わる colorScale プロパティを示します。

例

以下のコードは散布エリア シリーズをデータにバインドします。

var data = [
    { x: 0, y: 0, z: 2 },
    { x: 10, y: 0, z: 3 },
    { x: 10, y: 10, z: 5 },
    { x: 0, y: 10, z: 1 }];

$("#chart").igDataChart({
    width: "400px",
    height: "400px",
    axes: [{
        name: "xAxis",
        type: "numericX",
    }, {
        name: "yAxis",
        type: "numericY",
    }],
    series: [{
        name: "polygonSeries",
        type: "scatterArea",
        dataSource: data,
        xAxis: "xAxis",
        yAxis: "yAxis",
        xMemberPath: "x",
        yMemberPath: "y",
        colorMemberPath: "z",
        colorScale: {
            palette: [ "green", "yellow", "red" ],
            interpolationMode: "interpolateRGB",
        }
    }],
});

このコードは以下の結果になります。

関連コンテンツ

トピック

• 三角測量シリーズの構成: このトピックでは、igDataChart コントロールの散布エリアおよび散布等高線シリーズの構成の概要を提供します。

• 散布等高線シリーズの構成: このトピックでは、igDataChart コントロールで散布等高線シリーズを構成する方法について説明します。