このトピックでは、Echartsラダー折れ線グラフのグラフスタイルと構成パネルについて説明します。
チャートスタイル
設定パネル 
検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの
黒い点をドラッグして、ウィジェットの回転角度を制御します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。
Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
レンダリングエンジン: 折れ線グラフのレンダリングエンジン。 canvasとsvgを含みます。
凡例: 右側の目アイコンをクリックして、凡例のスタイルを表示します。
水平位置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、自動はウィジェットの位置と向きに基づいて決定されます。
左揃え: グラフィックがテキストの左側にある場合、左揃えになります。
中央に揃え: 凡例のグラフィックがテキストに重なっている場合は、中央に揃えます。
右揃え: グラフィックがテキストの右側にある場合、右揃えになります。
垂直位置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、自動はウィジェットの位置と向きに基づいて決定されます。
上の整列: グラフィックがウィンドウの上にある場合は、上の整列。
中央: グラフィックがウィンドウの中央にある場合の中央。
下の配置: グラフィックがウィンドウの下にある場合の下の配置。
方向: ドロップダウンリストから凡例の方向を選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直に分散されます。
ピン留め: [+] または [-] 記号をクリックするか数値を入力して、凡例の内側の余白を調整します。 単位: ピクセル。 デフォルトの内側マージンは5です。
要素の間隔: [+] または [-] 記号をクリックするか数値を入力して、凡例の各アイテム間の距離を調整します。 水平レイアウトの水平間隔、垂直レイアウトの垂直間隔。
テキストスタイル
色: 凡例のテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。
グリッド
左マージン: [+] または [-] 記号をクリックするか値を入力して、グリッドの左マージンを調整します。 単位: ピクセル。
上限: [+] または [-] をクリックするか、手動で数値を入力して、グリッドの上限を調整します。 単位: ピクセル。
右マージン: [+] または [-] 記号をクリックするか値を入力して、グリッドの右マージンを調整します。 単位: ピクセル。
下部マージン: [+] または [-] をクリックするか、値を入力してグリッドの下部マージンを調整します。 単位: ピクセル。
アダプティブレイアウト: このチェックボックスをオンにすると、折れ線グラフにアダプティブレイアウトが表示されます。 このチェックボックスをオフにすると、設定したスタイルに基づいてアダプティブレイアウトが折れ線グラフに表示されます。
X軸: 目アイコンをクリックしてX軸を表示します。
位置: x軸上のウィンドウの位置。
下: ウィンドウの下部にあるx軸の位置。
上: ウィンドウの上部にあるx軸の位置。
名前: x軸の名前。
位置: x軸上の名前の位置。 [開始] 、[終了] 、または [センター] を選択できます。 デフォルト値: End。
名前スタイル
色: x軸の名前テキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: x軸上の名前のフォントスタイル。
フォントの太さ: x軸上の名前のフォントの太さ。
フォント: x軸上の名前のフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して、x軸上の名前のフォントサイズを変更します。
名前の間隔: [+] または [-] 記号をクリックするか値を入力して、軸と軸の間の距離を変更します。
回転名: [+] または [-] 記号をクリックするか値を入力して、軸名の回転角度を変更します。
[リバース]: このチェックボックスをオンにすると、軸が逆方向に表示されます。 このチェックボックスをオフにすると、軸が順方向に表示されます。
空白のまま: このオプションを選択すると、システムはx軸の左右に空白のままになります。
静的: このオプションを選択すると、軸が静的である場合、軸を操作することはできません。
軸: 右側の目アイコンをクリックして、x軸を表示します。
On Zero: x軸またはy軸の軸が他の軸のゼロスケール上にあるかどうかを示します。 このパラメーターは、他の軸が値軸であり、ゼロスケールを含む場合にのみ有効です。
ラインスタイル
色: ドロップダウンリストをクリックして、軸の色の塗りつぶしスタイルを選択します。カラー塗りつぶし、グラデーション塗りつぶしなどです。 カラーピッカーの説明を参照して、x軸の色を変更します。
幅: [+] または [-] をクリックするか、値を入力してx軸の幅を変更します。
Type: 軸のタイプ。 オプションです。 値は、実線、点線、または点線です。
不透明度: [+] または [-] 記号をクリックするか値を入力して、x軸の透明度を変更します。 範囲は [0,1] です。
目盛り: 右側の目アイコンをクリックして、x軸にスケールを表示します。
内部: このチェックボックスをオンにすると、軸のスケールが内側になります。 このチェックボックスをオフにすると、軸のスケールが外側を向いています。
長さ: スケールの長さを変更するには、[+] または [-] 記号をクリックするか数値を入力します。
ラインスタイル
色: ドロップダウンリストから、色塗りやグラデーション塗りなどの色塗りスタイルを選択します。 カラーピッカーの説明を参照して、チェックマークの色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、目盛りの幅を変更します。
Type: 軸のタイプ。 オプションです。 有効な値: Solid、Dashed、Dotted。
透明度: [+] または [-] 記号をクリックするか値を入力して、目盛りの透明度を変更します。 範囲は [0,1] です。
スケールラベル: 右側の目アイコンをクリックして、x軸にスケールラベルを表示します。
内部: このチェックボックスをオンにすると、軸のラベルが内側になります。 このチェックボックスをオフにすると、軸のラベルが外側に向きます。
Rotate: スケールラベルの回転角度。 カテゴリ軸上のカテゴリラベルを表示できない場合は、スケールラベルを回転させて、それらが重ならないようにすることができます。 回転角度は-90度から90度の範囲です。
Outer Spacing: スケールラベルと軸の間の距離。
Formatter: スケールラベルの形式。 有効な値: 整数、小数点以下1桁、小数点以下2桁。 デフォルト値: Integer。
最小ラベルを表示: このオプションを選択すると、最小スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最小スケールのラベルは表示されないと自動的に判断されます。
最大ラベルを表示: このオプションを選択すると、最大スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最大スケールラベルは表示されません。
色: 軸のスケールラベルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 軸ラベルのフォントスタイル。
フォントの太さ: 軸ラベルテキストのフォントの太さ。
フォント: 軸ラベルテキストのフォントファミリ。
フォントサイズ: 軸スケールラベルテキストのフォントサイズ。
行セパレータ: 右側の目アイコンをクリックして、行セパレータを表示します。
ラインスタイル
色: カラーピッカーの説明を参照して、x軸の線区切りの色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、x軸線の線の区切り線の幅を変更します。
Type: x軸線セパレータのタイプ。 オプションです。 値は、実線、点線、または点線です。
透明度: [+] または [-] 記号をクリックするか値を入力して、x軸上の線区切りの透明度を変更します。 値の範囲は0から1です。
Y軸: 詳細については、「X軸」をご参照ください。
ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。
トリガータイプ: トリガーのタイプ。 このパラメーターはオプションです。 デフォルト値: Axes。
Data Item: データ項目グラフトリガー。 散布図や円グラフなど、カテゴリ軸を持たないグラフで使用されます。
Axis: 軸トリガー。縦グラフ、折れ線グラフ、およびカテゴリ軸を使用するその他のグラフで使用されます。
トリガーしない: 何もトリガーされません。
軸インジケーター: 目アイコンをクリックして軸インジケーターを表示します。
Type: インジケーターのタイプ。 有効な値: Line Indicator、Shadow Indicator、Cross Indicator。
自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着されます。 この関数は、数値軸と時間軸上でより意味があり、小さな数値点を自動的に見つけることができます。
ラインスタイル
色: カラーピッカーの説明を参照して、インジケータラインの色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、線幅を変更します。
Type: 行のタイプを示します。 オプションです。 値は、実線、点線、または点線です。
不透明度: [+] または [-] 記号をクリックするか値を入力して、インジケーター線の不透明度を変更します。 有効な値は 0～1 です。
影のスタイル
色: カラーピッカーの説明を参照して、シャドウの色を変更します。
透明度: [+] または [-] 記号をクリックするか値を入力して、影の透明度を変更します。 有効な値は 0～1 です。
クロススタイル
色: カラーピッカーの説明を参照して、クロスカラーを変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、交差を示す線の幅を変更します。
Type: 交差のタイプを示します。 オプションです。 値は、実線、点線、または点線です。
透明度: [+] または [-] 記号をクリックするか値を入力して、交差部分の透明度を変更します。 値の範囲は0から1です。
背景色: テキストラベルの背景色を表示します。
テキストスタイル
色: ダイアログボックスのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルを表示します。
フォントの太さ: ラベルテキストのフォントの太さを表示します。
フォント: ラベルテキストのフォントファミリを表示します。
フォントサイズ: ラベルテキストのフォントサイズを表示します。
シリーズ:
または
アイコンをクリックして、条件付きスタイルを追加または削除します。 
または
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし
て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 
名前: カスタムシリーズの名前。 データ内のsフィールド値と一緒に使用する必要があります。
マーカーグラフィック: カスタムグラフィック。 デフォルト値: Circle。 タグタイプには、None、Circle、Rectangle、Rectangle、Triangle、Diamond、Pushpin、Arrowが含まれます。
マーカーサイズ: [+] または [-] 記号をクリックするか値を入力して、マーカーのサイズを変更します。 単位: ピクセル。
回転角度: [+] または [-] をクリックするか、手動で数値を入力してマーカーの回転角度を変更します。 単位は度で、
アイコンを表示: 目アイコンをクリックして、アイコンスタイルを表示します。
ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効になっているときにアニメーション効果が表示されます。
凡例インタラクションのハイライト: このチェックボックスをオンにすると、凡例のホバーが開始されるとインタラクションがハイライトされます。
線グラフのステップ: 線グラフのステップスタイルを設定します。たとえば、[閉じる] 、[現在のポイントで回転] 、[中央のポイントで回転] 、[次のポイントで回転] です。
ラベル: 目アイコンをクリックして、ラベルスタイルを表示します。
位置: 棒グラフに対応するラベルの位置を設定します。上、左、内側を含みますが、これらに限定されません。
ポジショニング距離: ラベルと棒グラフの境界線の間の距離を設定します。
Rotate: ラベルが回転する角度。 カテゴリ軸上のカテゴリラベルを表示できない場合は、ラベルが重ならないように回転させることができます。 回転角度は-90度から90度の範囲です。
色: ラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
要素スタイル
色: カラーピッカーの説明を参照して、要素スタイルの色を変更します。
棒グラフフィレット: [+] または [-] 記号をクリックするか、値を入力してフィレットを変更します。
透明度: [+] または [-] 記号をクリックするか値を入力して、交差部分の透明度を変更します。 値の範囲は0から1です。
ラインスタイル
色: 線の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
幅: [+] または [-] 記号をクリックするか値を入力して、線の幅を変更します。
Type: 行のタイプ。 オプションです。 値は、実線、点線、または点線です。
透明度: [+] または [-] 記号をクリックするか値を入力して、線の透明度を変更します。 値の範囲は0から1です。
エリアスタイル
色: エリアスタイルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
透明度: [+] または [-] 記号をクリックするか、値を入力して、エリア交差の透明度を変更します。 値の範囲は0から1です。
滑らかな曲線: [+] または [-] 記号をクリックするか値を入力して、線の滑らかさを変更します。 単位: % 。 範囲は [0,1] です。
アニメーション: アニメーションを有効にするには、チェックボックスをオンにします。
アニメーション期間: [+] または [-] 記号をクリックするか値を入力して、最初のアニメーションの期間を変更します。 単位：ミリ秒。
イーズエフェクト: ドロップダウンリストから、データ更新アニメーションのイーズエフェクトを選択します。 デフォルト値はcubicOutです。
[データ] タブ
設定フィールドの説明
列 | 説明 |
| 折れ線グラフの各x軸のカテゴリ、つまりx軸の値を設定するために使用します。 |
| 折れ線グラフの各点の値を設定するために使用します。 |
| (オプション) シリーズの値。スタイルパネルのシリーズ構成項目と組み合わせて使用されます。 |
[インタラクション] タブ
このウィジェットには対話イベントが設定されていません。
Blueprint Editorでのインタラクションの設定
キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。
左上隅の
アイコンをクリックします。 Blueprint Editorで、[ノードのインポート] ペインの [ラダー線グラフ] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、ラダー折れ線グラフのパラメーターを設定できます。
Events
イベント
説明
データインターフェイス要求が完了したとき
イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイス要求が失敗した場合
データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データ項目がクリックされたとき
ラダー折れ線グラフの列がクリックされたときに発生するイベントで、その列に対応するデータ項目も発生します。
凡例がクリックされたとき
ラダー折れ線グラフの凡例をクリックしたときに発生するイベントで、列に対応するデータ項目も発生します。
action
Action
説明
要求データインタフェース
このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースが
https:// api.testで、リクエストデータインターフェイスに渡されるデータが{ id: '1'}の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。データのインポート
ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
ハイライト
アクションの入力データはオブジェクトタイプです。 パラメーターには、
seriesName(シリーズ名) 、seriesIndex(シリーズインデックス) 、dataIndex(データインデックス) 、およびname(データ名) が含まれます。 Sample data:{ "seriesName": "" 、 "seriesIndex": 1、 "dataIndex": 1、 "name": "" }ハイライト解除
アクションの入力データはオブジェクトタイプです。 パラメーターには、
seriesName(シリーズ名) 、seriesIndex(シリーズインデックス) 、dataIndex(データインデックス) 、およびname(データ名) が含まれます。 Sample data:{ "seriesName": "" 、 "seriesIndex": 1、 "dataIndex": 1、 "name": "" }表示ダイアログボックス
アクションの入力データはオブジェクトタイプです。 パラメータは、
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" } }