このトピックでは、コード例を使用して igShapeChart コントロールをアプリケーションに追加する方法を説明します。
このトピックは、以下のセクションで構成されます。
以下の手順は、igShapeChart コントロールをアプリケーションに追加する方法を示します。
以下は igShapeChart の画像です。
以下では igShapeChart をページに追加するために必要な手順を示します。
igShapeChart を保存するターゲット要素の作成。
HTML 本文内に igShapeChart コントロールをインスタンス化する
HTML の場合:
<body>
<div id="shapeChart"></div>
</body>
データ ソースを追加します。
igShapeChart を作成するには、最初にバインドするデータが必要になります。以下のコード スニペットは、シンプルなデータソースを作成する方法を示します。
HTML の場合:
<script>
var data = [
{ "X": 10, "Y": 10 },
{ "X": 40, "Y": 10 },
{ "X": 10, "Y": 40 },
{ "X": 40, "Y": 40 }];
</script>
igShapeChart のインスタンスを作成し、データ ソースにバインドします。
手順 1 で定義したターゲット
HTML の場合:
<script>
$(function () {
$("#shapeChart").igShapeChart({
dataSource: data,
width: "600px",
height: "600px",
xAxisMinimumValue: 0,
yAxisMinimumValue: 0,
xAxisMaximumValue: 50,
yAxisMaximumValue: 50,
});
});
</script>
結果を確認します。
結果を確認するために、プロジェクトをビルドして実行します。以上の手順を正しく実装した場合、igShapeChart は上記のプレビュー セクションで示したように表示されます。
オンラインで表示: GitHub