このトピックでは、Echartsファンネルチャートのチャートスタイルと構成パネルについて説明します。
チャートスタイル
設定パネル 
検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの
黒い点をドラッグして、ウィジェットの回転角度を制御します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。
Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
凡例: 右側の目アイコンをクリックして、凡例のスタイルを表示します。
Left: 凡例とウィジェットの左枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Top: 凡例とウィジェットの上枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: 凡例とウィジェットの右枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: 凡例とウィジェットの下枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
幅: 凡例の幅を調整する値を入力します。 デフォルト値はautoで、凡例の幅に適合します。
高さ: 凡例の高さを調整する値を入力します。 デフォルト値: auto。
方向: ドロップダウンリストから凡例の方向を選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直に分散されます。
配置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、自動はウィジェットの位置と向きに基づいて決定されます。
左揃え: グラフィックがテキストの左側にある場合、左揃えになります。
中央に揃え: 凡例のグラフィックがテキストに重なっている場合は、中央に揃えます。
右揃え: グラフィックがテキストの右側にある場合、右揃えになります。
ピン留め: [+] または [-] 記号をクリックするか数値を入力して、凡例の内側の余白を調整します。 単位: ピクセル。 デフォルトの内側マージンは5です。
要素の間隔: [+] または [-] 記号をクリックするか数値を入力して、凡例の各アイテム間の距離を調整します。 水平レイアウトの水平間隔、垂直レイアウトの垂直間隔。
グラフの幅: [+] または [-] 記号をクリックするか数値を入力して、凡例の幅を調整します。
グラフィックの高さ: [+] または [-] 記号をクリックするか値を入力して、凡例の高さを調整します。
選択モード: 目アイコンをクリックして選択モードを表示します。
オフの色: 凡例がオフのときに凡例の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。 プレビューまたは公開ページで凡例要素をクリックした場合にのみ、効果を確認できます。
テキストスタイル
色: 凡例のテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。
背景色: 凡例の背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: 凡例の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] をクリックするか、値を入力して凡例の枠の太さを調整します。
ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。
軸インジケータ
Type: Line indicatorやShadow Indicatorなどのインジケーターのタイプ。
自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着されます。 この関数は、数値軸と時間軸上でより意味があり、小さな数値点を自動的に見つけることができます。
ラベル: 右側の目アイコンをクリックして、軸インジケーターのラベルを表示します。
precision: テキストラベルの値の小数点精度。 デフォルトでは、現在の軸の値に基づいて値が自動的に決定されます。 2などの整数値を指定することもできます。これは、小数点以下2桁が保持されることを示します。
外側の間隔: このオプションをオンにすると、軸インジケータラベルと軸の間に一定の距離があります。 チェックボックスをオフにすると、軸インジケータラベルと軸の間に間隔がありません。
テキストスタイル
色: 軸インジケーターのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 軸インジケータラベルテキストのフォントスタイル。
フォントの太さ: 軸インジケーターのラベルテキストのフォントの太さ。
フォント: 軸インジケーターのラベルテキストのフォントファミリ。
フォントサイズ: 軸インジケータラベルテキストのフォントサイズ。
背景色: 軸インジケーターのテキストラベルの背景色。
枠の色: 軸インジケーターのテキストラベルの枠の色。
Border: 軸インジケーターのテキストラベルの境界線の太さ。
軸スタイル
色: カラーピッカーの説明を参照して、軸の色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、軸線の幅を変更します。
Type: 軸のタイプ。 オプションです。 有効な値は実線と破線である。
不透明度: [+] または [-] 記号をクリックするか値を入力して、軸の透明度を変更します。 範囲は [0,1] です。
トリガー条件: トリガーするトリガーの種類。 このパラメーターはオプションです。 [マウス移動トリガー] 、[マウスクリックトリガー] 、または [マウス移動とクリックトリガー] を選択できます。
背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。
ピン留め: [+] または [-] 記号をクリックするか、手動で数値を入力して背景フレームの内側の余白を変更します。 単位: ピクセル。 デフォルトの内側マージンは5です。
テキストスタイル
色: ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルを表示します。
フォントの太さ: テキストのフォントの太さを表示します。
フォント: テキストのフォントファミリを表示します。
フォントサイズ: テキストのフォントサイズを表示します。
チャート要素
名前: 漏斗グラフの名前。
最小値: チャートの最小値。 0、データ最小、および自動が含まれます。
最大値: チャートの最大値。 100、データ最大値、および自動を含みます。
最小サイズ: チャートの最小サイズを設定します。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
最大サイズ: チャートの最大サイズを設定します。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Left: 要素とウィジェットの左枠の間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: 要素とウィジェットの右枠の間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Top: 要素とコンポーネントの上枠の間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: 要素とコンポーネントの下の境界線との間の距離。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
並べ替え: チャートの並べ替えモード。 [なし] 、[降下] 、または [上昇] を選択できます。
間隔: [+] または [-] 記号をクリックするか数値を入力して、グラフ要素間の間隔を変更します。
凡例インタラクションのハイライト: このオプションを選択すると、凡例のホバー機能が有効になります。
水平整列: オプション。 有効な値: 左揃え、中央揃え、右揃え。
ラベル
通常のアイテム: 右側の目アイコンをクリックして、通常のアイテムを表示します。
タグコンテンツ: 目アイコンをクリックして、タグコンテンツを表示します。
値
数千区切りセパレータ: 値の数千区切りセパレータをオンにするには、チェックマークを選択します。
値の接尾辞: 値の接尾辞を入力します。
パーセンテージ
ラベルの折りたたみ: 右側の目アイコンをクリックして、ラベルの折りたたみ線を表示します。
ラベルスタイル
名前: [+] または [-] 記号をクリックするか値を入力して、名前タグのサイズを変更します。
値: [+] または [-] をクリックするか、値を入力して値ラベルのサイズを変更します。
パーセンテージ: [+] または [-] 記号をクリックするか値を入力して、パーセンテージタグのサイズを変更します。
位置: 漏斗チャート内のラベルの位置。 有効な値: Left、Inside、およびRight。 デフォルト値: Internal。
テキストスタイル
色: ラベルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
キーアイテム: 右側の目アイコンをクリックして、タグのキーアイテムを表示します。
タグコンテンツ: 目アイコンをクリックして、タグコンテンツを表示します。
値
数千区切りセパレータ: 値の数千区切りセパレータをオンにするには、チェックマークを選択します。
値の接尾辞: 値の接尾辞を入力します。
パーセンテージ
ラベルの折りたたみ: 右側の目アイコンをクリックして、ラベルの折りたたみ線を表示します。
ラベルスタイル
名前: [+] または [-] 記号をクリックするか値を入力して、名前タグのサイズを変更します。
値: [+] または [-] をクリックするか、値を入力して値ラベルのサイズを変更します。
パーセンテージ: [+] または [-] 記号をクリックするか値を入力して、パーセンテージタグのサイズを変更します。
位置: 漏斗チャート内のラベルの位置。 有効な値: Left、Inside、およびRight。 デフォルト値: Internal。
テキストスタイル
色: ラベルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
ラベルガイド
通常のアイテム: 右側の目アイコンをクリックして、通常のアイテムを表示します。
長さ: [+] または [-] をクリックするか、値を入力してラベルガイドの長さを変更します。
軸スタイル
色: カラーピッカーの説明を参照して、ラベルガイドの色を変更します。
幅: [+] または [-] をクリックするか、値を入力してラベルガイドの幅を変更します。
Type: ラベルガイドのタイプ。 オプションです。 有効な値は実線と破線である。
透明度: [+] または [-] 記号をクリックするか値を入力して、ラベルガイドラインの透明度を変更します。 範囲は [0,1] です。
キーアイテム: 右側の目アイコンをクリックして、タグのキーアイテムを表示します。
軸スタイル
色: カラーピッカーの説明を参照して、ラベルガイドの色を変更します。
幅: [+] または [-] をクリックするか、値を入力してラベルガイドの幅を変更します。
Type: ラベルガイドのタイプ。 オプションです。 有効な値: 実線および破線。
透明度: [+] または [-] 記号をクリックするか値を入力して、ラベルガイドラインの透明度を変更します。 範囲は [0,1] です。
要素スタイル
普通のアイテム
枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠サイズ: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠サイズを変更します。
ボーダースタイル: ボーダーのタイプ。 有効な値: SolidおよびDotted。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。
主なアイテム
枠の色: メジャーアイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] をクリックするか、手動で値を入力して、キー要素の枠の太さを変更します。
ボーダースタイル: ボーダーのタイプ。 有効な値: SolidおよびDotted。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。
data series: 右側の
または
アイコンをクリックして、条件付きスタイルを追加または削除します。 
または
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし
て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 色: カラーピッカーの説明を参照して、データ系列の色を変更します。
アニメーション: アニメーションを有効にするには、このチェックボックスをオンにします。
アニメーションしきい値: [+] または [-] をクリックするか、値を入力してアニメーションしきい値を変更します。 単位：ミリ秒。 1つのシリーズに表示されるグラフィックの数が設定したしきい値を超えると、アニメーション効果が無効になり、コンポーネントがクラッシュしないようになります。
アニメーション期間: [+] または [-] 記号をクリックするか値を入力して、最初のアニメーションの期間を変更します。 単位：ミリ秒。
イージング効果: ドロップダウンリストからデータ更新アニメーションのイージング効果を選択します。 デフォルト値はcubicOutです。
[データ] タブ
設定フィールドの説明
列 | 説明 |
| 漏斗グラフの各部品の名前を設定するために使用します。 |
| 漏斗グラフの各部品の値を設定するために使用されます。 |
[インタラクション] タブ
説明
インタラクション | 説明 |
データ項目がクリックされたとき | ウィジェット操作機能を有効にするには、[有効化] を選択します。 ファネルチャートウィジェットには対話型の構成があります。 クリックしてデータ項目を選択すると、コールバック値が返されます。 デフォルトでは、データのnameフィールドとvalueフィールドが返されます。 詳細は、「コールバック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": "リニア" }非表示
次の例は、ウィジェットを非表示にする方法を示しています。
return { "animationType": "" 、 "animationDuration": 1000、 "animationEasing": "リニア" }暗黙の状態への切り替え
次の例は、ウィジェットを表示するか非表示にするかを示しています。
return { "animationIn": { "animationType": "" 、 "animationDuration": 1000、 "animationEasing": "リニア" }, "animationOut": { "animationType": "" 、 "animationDuration": 1000、 "animationEasing": "リニア" } }移動
ウィジェットが指定された場所に移動されます。 参照データの例は以下の通りである。
return { // ポジショニングタイプ。 は絶対位置を示し、byは相対位置を示します。 デフォルト値はtoです。 "positionType": "to" 、 // x座標とy座標で示される場所。 "attr": { "x": 0、 "y": 0 }, // アニメーションの種類。 "animation": { "enable": false、 // アニメーションが表示される期間。 "animationDuration": 1000、 // アニメーションカーブ。linear | easeInOutQuad | easeInOutExpoに設定できます。 "animationEasing": "リニア" } }