バージョン

シリーズ要件

このトピックの内容

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

ChartType プロパティの設定

チャート タイプ トピックで説明されているように、チャート プロパティを変更するだけでさまざまなチャート タイプを描画できます。

初期化時にチャート タイプを割り当てる方法:

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 プロパティを PointLineSpline、または 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