このトピックでは、igDataChart
コントロールで散布ポリライン シリーズ要素を使用する方法を説明します。
以下のトピックを事前に読んでおくことをお勧めします。
igDataChart の追加: このトピックでは、igDataChart
™ コントロールをページに追加し、データにバインドする方法を紹介します。
igDataChart をデータにバインド: このトピックでは、igDataChart
™ コントロールを各種データ ソース (JavaScript 配列、IQueryable<T>
、Web サービス) にバインドする方法について説明します。
このトピックは、以下のセクションで構成されます。
igDataChart
コントロールで、散布ポリライン シリーズはポリラインを使用してデータを表示するシリーズです。この散布シリーズのタイプは、ネットワーク グラフなどの切断された折れ線の描画が必要な場合に使用されます。散布ポリライン シリーズは、データが多角形の代わりにポリラインで描画されることを除いて、散布多角形シリーズとほどんど同様に機能します。
以下は、様々なポイントの間に接続を描画する散布ポリライン シリーズを持つ igDataChart
コントロールのプレビューです。
igDataChart
コントロールのシリーズの他のタイプと同様、散布ポリライン シリーズには、データ バインディングのための dataSource
オプションがあります。このオプションは項目の配列を受けます。各項目には、図形の X および Y 値のポイント位置を配列として保存するデータ列が必要です。このデータ列は、shapeMemberPath
オプションにマップされます。散布ポリライン シリーズは、igDataChart
コントロールでポリラインをプロットするために、このマップされたデータ列のポイントを使用します。
以下はデータ要件に基づいたデータ構造の例です。
JavaScript の場合:
var data = [
{ Points: [
[{x: 0, y: 0}, {x: 0.5, y: 1}, {x: -0.5, y:1}, {x: 0, y: 0}],
[{x: 2, y: 0}, {x: 2.5, y: 1}, {x: 1.5, y:1}, {x: 2, y: 0}]]}]
データの準備ができた後、チャートに設定します。
JavaScript の場合:
$("#chart").igDataChart({
width: "400px",
height: "400px",
axes: [{
name: "xAxis",
type: "numericX",
}, {
name: "yAxis",
type: "numericY",
}],
series: [{
name: "series1",
type: "scatterPolyline",
dataSource: data,
xAxis: "xAxis",
yAxis: "yAxis",
shapeMemberPath: "Points",
}],
});
上記のようにデータとチャートを構成すると以下のようになります。
シェープ シリーズの構成: このトピックでは、igDataChart
コントロールで散布多角形および散布ポリライン シリーズの概要を提供します。
散布多角形シリーズの構成: このトピックでは、igDataChart
コントロールで散布多角形シリーズを構成する方法について説明します。
igDataChart
コントロールのポリライン シリーズを紹介します。オンラインで表示: GitHub