package.jsonファイルの仕様 - DataV - Alibaba Cloud ドキュメントセンター

package.jsonファイルには、ウィジェットの設定が含まれます。このトピックでは、package.jsonファイルのフィールドについて説明します。ファイル内のこれらのフィールドを設定して、必要に応じてウィジェットのスタイルをカスタマイズできます。

プロトコルバージョン2のpackage.jsonファイルの例

説明

次の例のコメントは、package.jsonファイルのフィールドの詳細を示しています。

{
  "name": "@leaf/pie-multi-radius-with-title",   //@Namespace/Widget name. The namespace is the name of a widget package. If you do not specify a namespace, the widget cannot be published.
  "version": "0.1.5",                            // The version number.
  "dependencies": {                              // The dependencies that exclude datav:/com/.
    "bcore": "0.0.9",
    "jquery": "2.1.4",                           // All dependency versions must be locked.
    "lodash": "4.6.1"
  },
  "datav": {                                     // The configurations of DataV.
    "cn_name": "Multidimensional pie chart with a title",               // The name of the widget.
    "protocol": 2,                               // The version of the protocol.
    "type": ["regular_pie"],                     // The type of the widget.
    "supportTheme": true,                      // Specifies whether the widget supports theme configurations.
    "view": {
      "width": 300,
      "height": 200,
      "minWidth": 100,
      "minHeight": 50
    },
    "icon": "",                                    // The URL of the widget icon.
    "apis": {                                      // The widget APIs. You can add one or more APIs.
      "source": {                                  // The name of the API.
        "handler": "render",                       // The method to handle the widget returned by the API.
        "description" : "The API of a multidimensional pie chart",          // The description of the API.
        "fields" : {                               // The fields required by the API. You can add one or more fields.
          "x" : {                                  // The name of the field.
            "description" : "Category",                // The description of the field.
            "type" : "string",                     // The type of the field.
            "optional": true                       // Specifies whether the field is optional.
          },
          "y" : {
            "description" : "Value",
            "type" : "int"
          }
        }
      }
    },
    "config" : {                                 // The configuration of the widget. It consists of the UI elements that are displayed in the editor.
      "paxis" : {
        "type" : "group",                        // Specifies that the element is a group. For more information, see Description of the config field.
        "name" : "Label",
        "children" : {
          "dx" : {
            "type" : "text",                    // Specifies that the element is a text. For more information, see Description of the config field.
            "name" : "Distance from the label to the center",
            "default" : 220
          }
        }
      },
      "title" : {
        "type" : "group",
        "name" : "Title",
        "children" : {
          "value" : {
            "hasVisibility" : "true",
            "visible" : "true",
            "type" : "text",
            "name" : "Title",
            "default" : "This is a title"
          },
          "font-size" : {
            "type" : "number",                 // Specifies that the element is a number. For more information, see Description of the config field.
            "name" : "Font",
            "min" : 10,
            "default" : 32,
            "max" : 100
          },
          "text-align" : {
            "name" : "Alignment",
            "type" : "select",                // Specifies that the element is a drop-down list. For more information, see Description of the config field.
            "options" : [
              {"name" : "Left", "value" : "left"},
              {"name" : "Right", "value" : "right"},
              {"name" : "Center", "value" : "center"}
            ],
            "default" : "center"
          },
          "color" : {
            "name" : "Font color",
            "type" : "color",                  // Specifies that the element is a color. For more information, see Description of the config field.
            "default" : "#fff"
          },
          "background-color" : {
            "name" : "Background",
            "type" : "color",
            "default" : "#000"
          }
         }
        }
      }
    },
  "api_data":{                               // The API data. You can add one or more pieces of data.
    "source" : [                             // The name of the API. It must be the same as the API name in the apis field. The size of data contained in this field cannot exceed 6 KB.
      {"x": "General goods", "y" : 5},
      {"x": "General goods", "y" : 22},
      {"x": "Light goods", "y" : 22},
      {"x": "Devices", "y" : 14},
      {"x": "Mineral products", "y" : 15},
      {"x": "Steel", "y" : 15},
      {"x": "Building materials", "y" : 12},
      {"x": "Food", "y" : 12},
      {"x": "Grain", "y" : 28}
    ],
  },
  "events": {                              // The global event parameters.
    "event-name": {                        // The name of the event.
      "description": "Event description",           // The description of the event.
      "fields": {                          // Specifies one or more fields.
        "value": {                         // The name of the field.
          "description": "Description"          // The description of the field.
        }
      }
    }
  },
  "publicHandler": {
    "show": {
      "name": "Display",
      "description": "Description",
      "type": "object",                  // Valid values: object, array, null, and any. The value any indicates any type.
      "fields": {
        "data": {
          "name": "Data",
          "type": "array",
          "children": {
                    ...
          }
        }
      }
    }
  },
}

configフィールドの設定項目

configフィールドには、ウィジェットの設定項目が含まれます。これらの設定項目は、ウィジェットの表示を制御し、エディタでUI要素を表示するために使用されます。

configフィールドを設定するときは、次の要件に注意してください。

ウィジェットのデフォルト設定項目を指定します。
エディターが入力情報を識別できるように、入力要件を指定します。

configフィールドのtypeを使用すると、ウィジェットのタイプとスタイルを設定できます。 typeフィールドは、エディターに表示されるUI要素を決定します。必要に応じてtypeフィールドを設定して、ウィジェットの品質とユーザーエクスペリエンスを大幅に向上させることができます。詳細については、「コントロール設定」をご参照ください。

"apis" と "api_data" のフィールド

apisフィールド

apisフィールドは、ウィジェット内のAPIの名前と、APIが必要とするフィールドを定義します。複数のAPIとフィールドを指定できます。

"apis": {                                    
  "source": {                                
  "handler": "render",                     
    "description" : "The API of a multidimensional pie chart",          
    "fields" : {                              
      "x" : {                                 
        "description" : "Category",                
        "type" : "string",                     
        "optional": true                       
      },
      "y" : {
        "description" : "Value",
        "type" : "int"
      }
    }
  },
  "source2":{
      ...                                     
  }
}

項目	説明	必須	補足
`apis`	ウィジェットのAPI。	継続する	ウィジェットは複数のAPIを提供できます。
`ソース`	APIの名前。	継続しない	カスタム値は許可されています。
`ハンドラー`	APIによって返されるデータを処理するメソッドの名前。	継続する	メソッドは、index.jsファイルのソースコードで指定する必要があります。
`説明`	APIの説明。	継続しない	なし。
`フィールド`	APIに必要なフィールド。	継続する	APIには複数のフィールドを含めることができます。
`fields.x`	フィールドの名前。	継続する	カスタム値は許可されています。
`fields.x.description`	フィールドの説明。	継続しない	なし。
`fields.x.type`	フィールドのタイプ。	継続しない	有効な値: number、string、boolean、object、array。
`fields.x.optional`	フィールドがオプションかどうかを指定します。	継続しない	BOOLEAN型の値がサポートされています。 `true`はフィールドがオプションであることを示し、`false`はフィールドが必須であることを示します。

api_dataフィールド

api_dataフィールドは、1つ以上のAPIのデータを定義する。このフィールドのAPI名は、apisフィールドのAPI名と同じである必要があります。 api_dataフィールドに含まれるデータのサイズは、6 KBを超えることはできません。詳細については、コメントをご参照ください。

"api_data":{                          
  "source" : [                       
    {"x": "General goods", "y" : 5},
    {"x": "General goods", "y" : 22},
    {"x": "Light goods", "y" : 22},
    {"x": "Devices", "y" : 14},
    {"x": "Mineral products", "y" : 15},
    {"x": "Steel", "y" : 15},
    {"x": "Building materials", "y" : 12},
    {"x": "Food", "y" : 12},
    {"x": "Grain", "y" : 28}
  ],
}

項目	説明	必須	補足
`api_データ`	APIのデータ。	継続する	ウィジェットには、1つ以上のAPIのデータを含めることができます。
`ソース`	APIの名前。	継続しない	このフィールドのAPI名は、`apis`フィールドのAPI名と同じである必要があります。フィールドに含まれるデータのサイズは6 KBを超えることはできません。

相互作用イベントの仕様

DataVのインタラクションイベントは、(ウィジェットコードでトリガーされる) emitメソッドとpackage.jsonファイルのeventsフィールドによって制御されます。

eventsフィールド

eventsフィールドはdatavフィールドの下にあり、configフィールドと同じレベルにあります。イベントフィールドは、対話イベントの名前、説明、および変数名を定義します。

{
  "events": {                 
    "click-me": {      "description": "Click-triggered event",           
      "fields": {                            
        "value": {                        
          "description": "Click value" 
        }
      }
    }
  }
}

項目	説明	必須	補足
`クリックして`	イベントの名前。	継続する	カスタム値は許可されています。
`説明`	イベントの説明。	継続しない	このフィールドは、イベントの使用を説明するために使用されます。
`フィールド`	フィールド。	継続する	このフィールドには、複数のフィールドの名前と説明を含めることができます。
`fields.value`	フィールドの名前。	継続する	カスタム値は許可されています。
`fields.value.description`	フィールドの説明。	継続しない	なし。

emitメソッド
emitは、ウィジェット内のイベント名とデータをパラメーターとして渡す基本的なメソッドです。このメソッドがトリガーされると、他のウィジェットは変数名に基づいてウィジェットのパラメーター値を取得できます。このメソッドは、index.jsファイルのソースコードに実装されています。詳細については、コメントをご参照ください。
```
render: function () {
  this.container.on('click', () => {
    this.emit('click-me', data)            // data must be an object, instead of a value. The attribute name is the variable name.
  })
}
```

"type" フィールド

タイプフィールドは、ウィジェットのタイプを定義する。詳細については、コメントをご参照ください。

type: ["regular_bar", ...]  // One widget can belong to multiple groups. Multiple widget types are separated by underscores (_), for example, "type1_type2".
  {                      // The common widget types.
    regular: "Regular chart",
    map: "Map", 
    media : "Media", 
    network: "Network", 
    text: "Text", 
    interact: "Interaction",
    material: "Material"
  }

publicHandlerフィールド

publicHandlerフィールドは、DataVの動作イベントを定義します。例：

"publicHandler": {
  "select": {
    "name": "select",
    "description": "Select an option",
    "type": "object",    
    "fields": {
      "data": {
        "name": "Data",
        "type": "array",
        "children": {
               ...
        }
      }
    }
  }
}

上記の例では、select動作イベントが登録されています。 index.jsファイルは、selectメソッドを実装する必要があります。それ以外の場合、selectメソッドが実行されるとエラーが返されます。

重要

show、hide、updateOptionsメソッドを実装しない場合、DataVはこれらのメソッドを自動的に登録および実装します。
updateOptionsメソッドを手動で実装できます。手動操作が実行されない場合、DataVはrenderメソッドを呼び出してupdateOptionsメソッドを実装します。

項目	説明	必須	補足
`名前`	イベントの名前。	継続する	イベント名は、ノードベースのプログラミング設定で使用されます。
`説明`	イベントの説明。	継続しない	説明の文字数に制限はありません。
`タイプ`	イベントの最初の入力パラメーターの型。	継続しない	オプションです。値はobjectに固定されています。
`フィールド`	フィールド。	継続しない	なし。
`fields.data.name`	フィールドの名前。	継続する	なし。
`fields.data.description`	フィールドの説明。	継続しない	なし。
`fields.data.type`	フィールドのタイプ。	継続する	オプションです。有効な値: number、string、boolean、object、array。
`fields.data.children`	サブノード。	継続しない	このフィールドは、`fields.data.type`がオブジェクトまたは配列に設定されている場合に指定する必要があります。
`fields.data.default`	デフォルト値。	継続しない	このフィールドは、`fields.data.type`がnumber、string、またはbooleanに設定されている場合に指定する必要があります。
`fields.data.optional`	フィールドがオプションかどうかを指定します。	継続しない	オプションです。このフィールドは、fields.data.typeがbooleanに設定されている場合に有効になります。 `true`はフィールドがオプションであることを示し、`false`はフィールドが必須であることを示します。