JSONでチャートの内容を定義

<< 目次を表示 >>

ページ位置:  その他の記法のモデリング > チャート > スクリプト連携のチャート >

JSONでチャートの内容を定義

スクリプト連携のチャートを自分でコーディングする方法の他に、チャートの簡単な利用方法もあります。スクリプト連携のチャートは、単一のデータソースで定義し、その内容を表示できます。

 

スクリプト連携チャートのスキーマに準拠したシンプルな JSON データ構造に合致するようにチャートを定義します。スキーマは、スキーマコンポーザーでも利用できます。また、Enterprise Architectのサンプルプロジェクにもサンプルが含まれています。

 

 

データソース - JSON

JSON データ構造を使用してチャートを描画するには、まず ツールボックスの「チャート」グループに含まれる「スクリプト連携チャート」要素を選択してから、内部のコードエディタを開きます。 モデルブラウザでの選択では、右クリックして「属性と操作」 > 「ソースコードの編集」を選択します。ダイアグラム上の選択では、右クリックして「チャートスクリプトの編集」を選択します。どちらの操作でも、チャートスクリプトを編集するためのエディタを開きます。描画するチャートを定義するJSON変数を作成し、ConstructChart関数を作成します。

 

ConstructChart関数は、単一の引数として、対象のダイアグラムに表示されているチャート要素のID(GUID文字列)を取ります。次に、組み込み関数ConstructChartFromJSONを呼び出し、第1引数にGUIDを、第2引数にJSON構造体を渡します。以下はその例です。

 

 

var barChart2DJSON =

{

 "Category" : "BarSmart",

 "Type" : "Simple",

 "Title" : "Vehicle Expenses",

 "Series" :

 [

    {

         "Label" : "Fuel",

         "Data":

         {

                 "Type" : "Column",

                 "Points" :

                 [

                         { "Category": "Jan", "Y": 1.0 },

                         { "Category": "Feb", "Y": 3.0 },

                         { "Category": "Mar", "Y": 7.0 },

                         { "Category": "Apr", "Y": 8.0 },

                         { "Category": "May", "Y": 10.0 },

                         { "Category": "Jun", "Y": 15.0 }

                 ]

         }

 },

 {

         "Label" : "Taxes",

         "Data":

         {

                 "Type" : "Normal",

                 "Points" :

                 [

                         { "Y":10.0 },

                         { "Y":12.0 },

                         { "Y":16.0 },

                         { "Y":17.0 },

                         { "Y":10.0 },

                         { "Y":12.0 }

                 ]

         }

 },

 {

         "Label" : "Maintenance",

         "Data":

         {

                 "Type" : "Normal",

                 "Points" :

                 [

                         { "Y":5.0 },

                         { "Y":2.0 },

                         { "Y":6.0 },

                         { "Y":7.0 },

                         { "Y":1.0 },

                         { "Y":2.0 }

                 ]

         }

 },

 {

         "Label" : "Other",

         "Data":

         {

                 "Type" : "Normal",

                 "Points" :

                 [

                         { "Y":2.5 },

                         { "Y":2.5 },

                         { "Y":2.5 },

                         { "Y":2.5 },

                         { "Y":2.5 },

                         { "Y":2.5 }

                 ]

         }

 }

 ]

};

 

function ConstructChart(chartGuid)

{

 ConstructChartFromJSON(chartGuid, barChart2DJSON);

}

 

 

その他のサンプル

別のJSONの例は、サンプルプロジェクトに含まれています。

 

それぞれのサンプル内のチャートのパッケージには、スクリプト連携のチャート図とスクリプト連携のチャート要素が含まれています。これらの例のいずれかから要素を選択し、右クリックメニューの「チャートスクリプトの編集」を選択すると、チャート要素が持つソースコードが表示されます。さまざまなチャートの例を見ることによって、興味のある種類のチャートを作成するためにJSONを使用する方法を知ることができます。