このトピックは、以下のセクションで構成されます。
チャート タイプ トピックで説明されているように、チャート プロパティを変更するだけでさまざまなチャート タイプを描画できます。
初期化時にチャート タイプを割り当てる方法:
JavaScript の場合:
<script type="text/javascript">
$(function ()
{
$("#shapeChart").igShapeChart(
{
chartType: "bubble",
}
});
});
</script>
チャート タイプ | x | y | value | radius | points* |
---|---|---|---|---|---|
Point |
X | X | |||
Line |
X | X | |||
Spline |
X | X | |||
HighDensity |
X | X | |||
Bubble |
X | X | X | ||
Area |
X | X | X | ||
Contour |
X | X | X | ||
Polyline |
X | ||||
Polygon |
X |
このセクションは、各チャート タイプの最小要件を表示する例です。以下の各データ クラスは、チャートのビジュアル データを描画するプロパティを含みます。
ChartType
プロパティを Point
、Line
、Spline
、または HighDensity
値に設定する場合、以下を使用します。
JavaScript の場合:
<script>
function ScatterPoints()
{
var dataItems =
[
{ "x": 10, "y": 10 },
{ "x": 20, "y": 20 },
];
return dataItems;
}
</script>
ChartType
プロパティを Bubble
値に設定する場合、以下を使用します。
JavaScript の場合:
<script>
function ScatterBubbles()
{
var dataItems =
[
{ "x": 10, "y": 10, "radius": 10 },
{ "x": 20, "y": 20, "radius": 10 },
];
return dataItems;
}
</script>
ChartType
プロパティを Area
または Contour
値に設定する場合、以下を使用します。
JavaScript の場合:
<script>
function ScatterValues()
{
var dataItems =
[
{ "x": 10, "y": 10, "value": 10 },
{ "x": 20, "y": 20, "value": 10 },
];
return dataItems;
}
</script>
ChartType
プロパティを Polyline
または Polygon
値に設定する場合、以下を使用します。
<script>
function ScatterShapes(x, y, w, h)
{
function createShape(x, y, w, h)
{
return [
{ "x": x, "y": y },
{ "x": x + w, "y": y },
{ "x": x + w, "y": y + h },
{ "x": x, "y": y + h },
{ "x": x, "y": y }];
}
var data =
[
{ "points": [createShape(10, 10, 10, 10)]},
{ "points": [createShape(20, 20, 10, 10)]},
];
return data;
}
</script>
関連トピック:
オンラインで表示: GitHub