このトピックでは、Echarts chordalグラフのグラフスタイルと構成パネルについて説明します。
チャートスタイル
設定パネル 
検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの
黒い点をドラッグして、ウィジェットの回転角度を制御します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。
Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
チャート要素
Left: 要素とウィジェットの左枠の間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
コンテナの高さと幅に対する割合 (20% など) 。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Top: 要素とコンポーネントの上枠の間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
コンテナの高さと幅に対する割合 (20% など) 。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: 要素とウィジェットの右枠の間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: 要素とコンポーネントの下の境界線との間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
幅: 要素の幅を調整する値を入力します。 デフォルト値はautoで、要素の幅に適応します。
高さ: 要素の高さを調整する値を入力します。 デフォルト値: auto。
静的: このチェックボックスをオンにすると、静的タグは使用できません。
凡例のリンク: このチェックボックスをオンにすると、ホバーリンクが有効になります。
ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効になっているときにアニメーション効果が表示されます。
円形レイアウト
ラベルの回転: このチェックボックスをオンにすると、テキストはチャート要素の外側にあります。 チェックボックスをオフにすると、テキストがチャートの上に中断されます。
ズーム&パンローミング: このチェックボックスをオンにすると、ズーム&パンローミング機能が有効になります。
ホバーノード: ノードホバー機能を有効にするには、このチェックボックスをオンにします。
マーカーグラフィック: オプション。 デフォルト値: circle。 タグの種類には、circle、rect、roundRect、triangle、diamond、pin、arrow、noneなどがあり、URLまたは写真のパスとして設定することもできます。
回転角度: [+] または [-] 記号をクリックするか値を入力して、マーカーの回転角度を変更します。
要素スタイル
普通のアイテム
枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠の太さを変更します。
ボーダースタイル: ボーダーに使用するストロークのタイプ。 貴重な値には、SolidとDottedが含まれます。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 値の範囲は0から1です。
選択済みアイテム
枠の色: 選択したアイテムの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] 記号をクリックするか値を入力して、選択した要素の枠の太さを変更します。
ボーダースタイル: ボーダーに使用するストロークのタイプ。 貴重な値には、SolidとDottedが含まれます。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、選択した要素の透明度を変更します。 値の範囲は0から1です。
軸スタイル
方向矢印を表示: このチェックボックスをオンにすると、グラフ間の線に方向矢印が表示されます。
普通のアイテム
色: カラーピッカーの説明を参照して、共通要素の色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、通常の要素の幅を変更します。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。
曲率: [+] または [-] 記号をクリックするか値を入力して、法線要素の曲率を変更します。
選択済みアイテム
色: 選択した要素の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
幅: [+] または [-] 記号をクリックするか値を入力して、選択した要素の幅を変更します。
透明度: [+] または [-] 記号をクリックするか値を入力して、選択した要素の透明度を変更します。 値の範囲は0から1です。
ラベル
通常のアイテム: 右側の目アイコンをクリックして、通常のアイテム (マウスイベントに応答しない列) のラベルテキストを表示します。
テキストスタイル
色: 共通アイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
選択したアイテム: 右側の目アイコンをクリックして、選択したアイテム (マウスイベントに応答する列) のラベルテキストを表示します。
テキストスタイル
色: 選択したアイテムラベルのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
エッジラベル
通常のアイテム: 右側の目アイコンをクリックすると、通常のアイテム (マウスイベントに応答しない列) の端にラベルテキストが表示されます。
テキストスタイル
色: 共通アイテムの端に沿ったラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: 通常アイテムの端に沿ったラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: 通常のアイテムの端に沿ったラベルテキストのフォントサイズ。
選択したアイテム: 右側の目アイコンをクリックすると、選択したアイテム (マウスイベントに応答する列) の端にラベルのテキストが表示されます。
テキストスタイル
色: 選択したアイテムの端に沿ってラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: 選択した項目の近くのラベルテキストのフォントサイズ。
凡例: 右側の目アイコンをクリックして、凡例のスタイルを表示します。
Top: 凡例とウィジェットの上枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: 凡例とウィジェットの右枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: 凡例とウィジェットの下枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
幅: 凡例の幅を調整する値を入力します。 デフォルト値はautoで、凡例の幅に適合します。
高さ: 凡例の高さを調整する値を入力します。 デフォルト値: auto。
方向: ドロップダウンリストから凡例の方向を選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直に分散されます。
配置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、自動はウィジェットの位置と向きに基づいて決定されます。
左揃え: グラフィックがテキストの左側にある場合、左揃えになります。
中央に揃え: 凡例のグラフィックがテキストに重なっている場合は、中央に揃えます。
右揃え: グラフィックがテキストの右側にある場合、右揃えになります。
ピン留め: [+] または [-] 記号をクリックするか数値を入力して、凡例の内側の余白を調整します。 単位: ピクセル。 デフォルトの内側マージンは5です。
要素の間隔: [+] または [-] 記号をクリックするか数値を入力して、凡例の各アイテム間の距離を調整します。 水平レイアウトの水平間隔、垂直レイアウトの垂直間隔。
グラフの幅: [+] または [-] 記号をクリックするか数値を入力して、凡例の幅を調整します。
グラフィックの高さ: [+] または [-] 記号をクリックするか値を入力して、凡例の高さを調整します。
オフの色: 凡例がオフのときに凡例の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。 プレビューまたは公開ページで凡例要素をクリックした場合にのみ、効果を確認できます。
テキストスタイル
色: 凡例のテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。
背景色: 凡例の背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: 凡例の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠のサイズ: [+] または [-] をクリックするか、値を入力して凡例の枠の太さを調整します。
配置: ドロップダウンリストをクリックして、凡例とウィジェットの配置方法を選択します。 このパラメーターの値は、[左揃え] 、[中央揃え] 、および [右揃え] です。 デフォルト値は [センターの整列] です。
ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。
トリガー条件: トリガーの種類。 このパラメーターはオプションです。 [マウス移動トリガー] 、[マウスクリックトリガー] 、および [マウス移動とクリックトリガー] を選択できます。
背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠サイズ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。
ピン留め: [+] または [-] 記号をクリックするか、手動で数値を入力して背景フレームの内側の余白を変更します。 単位: ピクセル。 デフォルトの内側マージンは5です。
テキストスタイル
色: ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルを表示します。
フォントの太さ: テキストのフォントの太さを表示します。
フォント: テキストのフォントファミリを表示します。
フォントサイズ: テキストのフォントサイズを表示します。
シリーズ:
または
アイコンをクリックして、条件付きスタイルを追加または削除します。 
または
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし
て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 シリーズ名: シリーズの名前を入力します。
シリーズの色: カラーピッカーの説明を参照して、シリーズの色を変更します。
[データ] タブ
設定フィールドの説明
列 | 説明 |
| コードグラフのノード情報を設定するために使用します。 |
| コーダルグラフのアソシエーションライン情報を設定するために使用します。 |
[インタラクション] タブ
説明
インタラクション | 説明 |
データ項目がクリックされたとき | ウィジェット操作機能を有効にするには、[有効化] を選択します。 弦グラフは、対話型構成を有する。 クリックしてデータ項目を選択すると、コールバック値がスローされます。 デフォルトでは、データのtypeやidなどのフィールドがスローされます。 詳細については、「ティッカーボードのコールバックIDの設定」をご参照ください。 |
凡例がクリックされたとき | ウィジェット操作機能を有効にするには、[有効化] を選択します。 弦グラフコンポーネントは、対話的な構成を有する。 凡例をクリックすると、コールバック値が返されます。 デフォルトでは、データ内の選択されたフィールドが返されます。 詳細については、「」をご参照ください。トークン反転ウィジェットのコールバックIDを設定するにはどうすればよいですか? |
Blueprint Editorでのインタラクションの設定
Canvas Editorでウィジェットを右クリックし、[Blueprint Editorにエクスポート] を選択します。
左上隅の
アイコンをクリックします。 Blueprint Editorで、[インポートしたノード] ペインで [コードグラフ] をクリックします。 次の図に示すように、キャンバスでコードグラフのパラメーターを表示できます。
Events
イベント
説明
データインターフェイス要求が完了したとき
イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイス要求が失敗した場合
データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データ項目がクリックされたとき
コードグラフのデータ項目が、対応するデータ項目とともにクリックされたときに発生するイベント。
凡例がクリックされたとき
コードグラフの凡例がクリックされたときに発生するイベントと、対応するデータ項目。
action
Action
説明
要求データインタフェース
このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースが
https:// api.testで、リクエストデータインターフェイスに転送されるデータが{ id: '1'}の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。データのインポート
ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
表示ダイアログボックス
アクションの入力データはオブジェクトタイプです。 パラメータは、
dataindex(データインデックス) 、name(データ名) 、x(x軸位置) 、およびy(y軸位置) を含む。 Sample data:{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }[非表示] ダイアログボックス
ダイアログボックスを非表示にします。パラメータは必要ありません。
凡例コントロール
アクションの入力データはオブジェクトタイプです。 パラメーターには、
type(凡例アクションタイプ) とname(凡例名) が含まれます。 Sample data:{ "type": "legendToggleSelect", "name": "" }コンポーネント設定の更新
ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
表示
ウィジェットの例を次に示します。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }非表示
次の例は、ウィジェットを非表示にする方法を示しています。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }暗黙の状態への切り替え
次の例は、ウィジェットを表示するか非表示にするかを示しています。
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }移動
ウィジェットを指定した場所に移動します。 参照データの例を次に示します。
return{ // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }