このトピックでは、Echartsローソク足チャートのチャートスタイルと構成パネルについて説明します。
チャートスタイル
設定パネル 
検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの
黒い点をドラッグして、ウィジェットの回転角度を制御します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。
Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
凡例: 右側の目アイコンをクリックして、凡例のスタイルを表示します。
Left: 凡例とウィジェットの左枠の間の距離。 デフォルト値: 25% 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Top: 凡例とウィジェットの上枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: 凡例とウィジェットの右枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: 凡例とウィジェットの下枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
幅: 凡例の幅を調整する値を入力します。 デフォルト値はautoで、凡例の幅に適合します。
高さ: 凡例の高さを調整する値を入力します。 デフォルト値: auto。
方向: ドロップダウンリストから凡例の方向を選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直に分散されます。
配置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。
左揃え: グラフィックがテキストの左側にある場合、左揃えになります。
中央に揃え: 凡例のグラフィックがテキストに重なっている場合は、中央に揃えます。
右揃え: グラフィックがテキストの右側にある場合は、右揃え。
ピン留め: [+] または [-] 記号をクリックするか数値を入力して、凡例の内側の余白を調整します。 単位: ピクセル。 デフォルトの内側マージンは5です。
要素の間隔: [+] または [-] 記号をクリックするか数値を入力して、凡例の各アイテム間の距離を調整します。 水平レイアウトの水平間隔、垂直レイアウトの垂直間隔。
グラフの幅: [+] または [-] 記号をクリックするか数値を入力して、凡例の幅を調整します。
グラフィックの高さ: [+] または [-] 記号をクリックするか値を入力して、凡例の高さを調整します。
選択モード: 目アイコンをクリックして選択モードを表示します。
オフの色: 凡例がオフのときに凡例の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。 プレビューまたは公開ページで凡例要素をクリックした場合にのみ、効果を確認できます。
テキストスタイル
色: 凡例のテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。
背景色: 凡例の背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: 凡例の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠のサイズ: [+] または [-] をクリックするか、値を入力して凡例の枠の太さを調整します。
グリッド: 右側の目アイコンをクリックして、グリッドスタイルを表示します。
Left: グリッドとウィジェットの左枠の間の距離。 デフォルト値: 3% 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
上: グリッドとウィジェットの上枠の間の距離。 デフォルト値: 60 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: グリッドとウィジェットの右枠の間の距離。 デフォルト値: 4% 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: グリッドとウィジェットの下の境界との間の距離。 デフォルト値: 3% 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
幅: グリッドの幅。 デフォルト値: auto。 幅は適応的である。
高さ: グリッドの高さ。 デフォルト値: auto。
アダプティブレイアウト: このチェックボックスをオンにすると、ヒストグラムがレイアウトの調整に使用されます。 このチェックボックスをオフにすると、ヒストグラムがレイアウトの調整に使用されます。
背景色: メッシュの背景色を変更します。 デフォルトでは、背景色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: グリッドの枠の色を変更します。 デフォルトの色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] をクリックするか、値を入力して枠の太さを調整します。
X軸: 目アイコンをクリックしてX軸を表示します。
Displacement: デフォルト位置からのx軸のオフセット。 デフォルト値は0です。
名前: x軸の名前。
位置: x軸上の名前の位置。 [開始] 、[センター] 、または [終了] を選択できます。 デフォルト値: End。
名前スタイル
色: x軸の名前テキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: x軸上の名前のフォントスタイル。
フォントの太さ: x軸上の名前のフォントの太さ。
フォント: x軸上の名前のフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して、x軸上の名前のフォントサイズを変更します。
名前の間隔: [+] または [-] 記号をクリックするか値を入力して、軸と軸の間の距離を変更します。
回転名: [+] または [-] 記号をクリックするか値を入力して、軸名の回転角度を変更します。
[リバース]: このチェックボックスをオンにすると、軸が逆方向に表示されます。 このチェックボックスをオフにすると、軸が順方向に表示されます。
白のまま: このチェックボックスをオンにすると、軸の両側が空白のままになります。 このチェックボックスをオフにすると、軸の両側が空白のままになります。
最小値: 軸スケールの最小値。 デフォルト値は最小データ値です。 この値は、軸上のデータの最小値が最小スケールとして使用されることを示します。 このパラメーターを設定しないと、軸のスケールが均等に分布するように、最小値が自動的に計算されます。
最大値: 軸上のスケールの最大値。 デフォルト値は [最大データ値] です。 この値は、軸上のデータの最大値が最大スケールとして使用されることを示します。 この値を設定しない場合、最大値は自動的に計算され、軸スケールの均等な分布が保証されます。
自動スケーリング: 選択した場合、座標スケールに強制的にゼロスケールが含まれません。 このパラメーターは、値軸でのみ有効です。 この設定項目は、最大値と最小値を設定すると無効になります。
静的: このオプションを選択すると、軸が静的である場合、軸を操作することはできません。
軸: 右側の目アイコンをクリックして、x軸を表示します。
On Zero: x軸またはy軸の軸が他の軸のゼロスケール上にあるかどうかを示します。 このパラメーターは、他の軸が値軸であり、ゼロスケールを含む場合にのみ有効です。
軸スタイル
色: カラーピッカーの説明を参照して、x軸線の色を変更します。
幅: [+] または [-] をクリックするか、値を入力してx軸の幅を変更します。
Type: 軸のタイプ。 オプションです。 有効な値: 実線および破線。
不透明度: [+] または [-] 記号をクリックするか値を入力して、x軸の透明度を変更します。 範囲は [0,1] です。
スケール: 右側の目アイコンをクリックして、x軸にスケールを表示します。
ラベルに揃える: このチェックボックスをオンにすると、チェックマークがラベルに揃えられます。 このパラメーターは、カテゴリ軸に [空白のまま] を選択した後にのみ有効になります。
interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸スケールの表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。
内部: このチェックボックスをオンにすると、軸のスケールが内側になります。 このチェックボックスをオフにすると、軸のスケールが外側を向いています。
長さ: スケールの長さを変更するには、[+] または [-] 記号をクリックするか数値を入力します。
軸スタイル
色: ドロップダウンリストから、色塗りやグラデーション塗りなどの色塗りスタイルを選択します。 カラーピッカーの説明を参照して、チェックマークの色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、目盛りの幅を変更します。
Type: 軸のタイプ。 オプションです。 有効な値: 実線および破線。
透明度: [+] または [-] 記号をクリックするか値を入力して、目盛りの透明度を変更します。 範囲は [0,1] です。
スケールラベル: 右側の目アイコンをクリックして、x軸にスケールラベルを表示します。
interval: 軸上のスケールラベルの表示間隔です。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、ラベルは互いに重ならない間隔で表示されます。 0すべてのラベルを強制的に表示するように設定できます。 このパラメーターを1に設定すると、他のラベルごとに1つのラベルが表示されます。 このパラメーターを2に設定すると、他のラベルごとに1つのラベルが表示されます。
内部: このチェックボックスをオンにすると、軸のラベルが内側になります。 このチェックボックスをオフにすると、軸のラベルが外側に向きます。
Rotate: スケールラベルの回転角度。 カテゴリ軸上のカテゴリラベルを表示できない場合は、スケールラベルを回転させて、それらが重ならないようにすることができます。 回転角度は-90度から90度の範囲です。
Outer Spacing: スケールラベルと軸の間の距離。
最小ラベルを表示: このオプションを選択すると、最小スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最小スケールのラベルは表示されないと自動的に判断されます。
最大ラベルを表示: このオプションを選択すると、最大スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最大スケールラベルは表示されません。
テキストスタイル
色: 軸のスケールラベルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 軸ラベルのフォントスタイル。
フォントの太さ: 軸ラベルテキストのフォントの太さ。
フォント: 軸ラベルテキストのフォントファミリ。
フォントサイズ: 軸スケールラベルテキストのフォントサイズ。
アライメント: 軸スケールラベルテキストの水平方向の配置 (左配置、中央配置、右配置など) 。
配置: オプション。 有効な値: 上の配置、中央の配置、および下の配置。
行セパレータ: 右側の目アイコンをクリックして、行セパレータを表示します。
interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸分離線の表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、行セパレータは重複しないポリシー間隔で表示されます。 0を設定すると、すべての行セパレータが強制的に表示されます。 値1は、すべての行セパレータが行セパレータを表示することを示します。 2の値は、すべての2つの行セパレータが行セパレータを表示することを示します。
軸スタイル
幅: [+] または [-] 記号をクリックするか値を入力して、x軸線の線の区切り線の幅を変更します。
Type: 軸のタイプ。 オプションです。 有効な値: 実線および破線。
透明度: [+] または [-] 記号をクリックするか値を入力して、x軸上の線区切りの透明度を変更します。 値の範囲は0から1です。
分割領域: 右側の目アイコンをクリックして、分割領域を表示します。
interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸分離領域の表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、分割領域は重ならない間隔で表示されます。 0、全ての分割領域を強制的に表示するように設定することができる。 値が1に設定されている場合、1つの分割領域が1つおきに表示されます。 値が2に設定されている場合、1つの分割領域が2つの分割領域ごとに表示されます。
エリアスタイル
透明度: [+] または [-] 記号をクリックするか値を入力して、分割領域の透明度を変更します。 有効な値は 0～1 です。
軸インジケーター: 目アイコンをクリックして軸インジケーターを表示します。
Type: インジケーターのタイプ。 有効な値: Line IndicatorおよびShadow Indicator。
自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着されます。 この関数は、数値軸と時間軸上でより意味があり、小さな数値点を自動的に見つけることができます。
初期値: 軸インジケーターの初期位置。 デフォルト値は0です。
ステータス: 軸インジケーターの現在のステータス。 チェックボックスをオンにすると、インジケータが表示されます。 チェックボックスをオフにすると、インジケーターは非表示になります。
ラベル: 右側の目アイコンをクリックして、軸インジケーターのラベルを表示します。
precision: テキストラベルの値の小数点精度。 デフォルトでは、現在の軸の値に基づいて値が自動的に決定されます。 2などの整数値を指定することもできます。これは、小数点以下2桁が保持されることを示します。
外側の間隔: このオプションをオンにすると、軸インジケータのラベルが軸から間隔を空けられます。 チェックボックスをオフにすると、軸インジケータラベルと軸の間に間隔がありません。
テキストスタイル
色: 軸インジケーターのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 軸インジケータラベルテキストのフォントスタイル。
フォントの太さ: 軸インジケーターのラベルテキストのフォントの太さ。
フォント: 軸インジケーターのラベルテキストのフォントファミリ。
フォントサイズ: 軸インジケータラベルテキストのフォントサイズ。
背景色: 軸インジケーターのテキストラベルの背景色。
枠の色: 軸インジケーターのテキストラベルの枠の色。
枠の幅: 軸インジケーターのテキストラベルの枠の太さ。
軸スタイル
色: カラーピッカーの説明を参照して、軸の色を変更します。
幅: プラス記号 ([+]) または [-] をクリックするか、値を入力して軸の線幅を変更します。
Type: 軸のタイプ。 オプションです。 値は、実線または破線とすることができる。
不透明度: プラス記号 ([+]) または [-] をクリックするか、値を入力して軸の透明度を変更します。 値の範囲は0から1です。
ドラッグハンドル: 右側の目アイコンをクリックしてドラッグハンドルを表示します。
サイズ: [+] または [-] 記号をクリックするか値を入力して、ドラッグハンドルのサイズを変更します。
外側の間隔: [+] または [-] 記号をクリックするか値を入力して、中心点とドラッグハンドルの軸の間の距離を変更します。
色: ドラッグハンドルの色。
更新頻度: ハンドルがドラッグされると、大画面の更新サイクルがトリガーされます。 単位：ミリ秒。 値を増やすと、パフォーマンスは向上しますが、エクスペリエンスは低下します。
Y軸: 詳細については、「X軸」をご参照ください。
データスケーリング: 目アイコンをクリックしてデータスケーリングを表示します。
開始率: データウィンドウ範囲の開始率を示すローソク足チャート。
Percentage to end: ローソク足チャートは、データウィンドウ範囲の終了率です。
Left: データスケーリングとウィジェットの左枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Top: データスケーリングとウィジェットの上枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: データスケーリングとウィジェットの右枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: データスケーリングとウィジェットの下限との間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
方向: ドロップダウンリストから方向を選択します。 水平と垂直。
ズームロック: 右側の目アイコンをクリックして、ズームをロックします。
テキストスタイル
色: テキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイル。
フォントの太さ: テキストのフォントの太さ。
フォント: テキストのフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力してフォントサイズを変更します。
データ背景スタイル
ラインスタイル
色: 線の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
幅: [+] または [-] 記号をクリックするか値を入力して、線の幅を変更します。
Type: 行のタイプ。 オプションです。 値は、実線または破線とすることができる。
エリアスタイル
色: エリアの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
ハンドルアイコン (SVGパス): ハンドルアイコンが配置されているプロジェクトのSVGパス。
ハンドルサイズ: データスケーリングビューのハンドルアイコンのサイズ。
ハンドルスタイル
色: カラーピッカーの説明を参照して、ハンドル要素の背景色を変更します。
枠の色: ハンドル要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] をクリックするか、値を入力してハンドル要素の枠の太さを変更します。
ボーダースタイル: ボーダーのストロークタイプ。 ストロークタイプは、実線または点線です。
透明度: [+] または [-] 記号をクリックするか値を入力して、ハンドルの透明度を変更します。 値の範囲は0から1です。
ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。
トリガー条件: トリガーするトリガーの種類。 このパラメーターはオプションです。 [マウス移動トリガー] 、[マウスクリックトリガー] 、または [マウス移動とクリックトリガー] を選択できます。
背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。
パディング: [+] または [-] 記号をクリックするか値を入力して、背景フレームのパディングを変更します。 単位: ピクセル。 デフォルトのパディングは5です。
テキストスタイル
色: ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルを表示します。
フォントの太さ: テキストのフォントの太さを表示します。
フォント: テキストのフォントファミリを表示します。
フォントサイズ: テキストのフォントサイズを表示します。
シリーズ:
または
アイコンをクリックして、条件付きスタイルを追加または削除します。 
または
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし
て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 
名前: カスタムシリーズの名前。 データ内のsフィールド値と一緒に使用する必要があります。
タイプ: オプション。 ローソク足チャートのタイプ。 このパラメーターの値は、K-lineおよびPolylineです。
マーカーグラフィック: オプション。 デフォルト値: emptyCircle。 タグタイプには、emptyCircle、rect、roundRect、triangle、diamond、pin、arrow、noneなどがあり、URLまたは画像のパスとして設定することもできます。
マーカーサイズ: [+] または [-] 記号をクリックするか値を入力して、マーカーパターンのサイズを変更します。
回転角度: [+] または [-] 記号をクリックするか値を入力して、マーカーの回転角度を変更します。
表示アイコン: タググラフィックを表示するか非表示にするかを制御します。
ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効になっているときにアニメーション効果が表示されます。
凡例ホバーリンク: このチェックボックスをオンにすると、アイコンがリンクを覆います。
スタックされたチャート: データがスタックされます。 同じカテゴリ軸に同じ構成のスタック値をスタックできます。
空のデータに接続: このチェックボックスをオンにすると、空のデータを使用してk線グラフをシミュレートできます。
トリミング: このオプションを選択すると、ウィンドウを超えた部分をトリミングできます。
ステップラインチャート: 折れ線グラフがステップラインチャートかどうかを選択します。 はしごの折れ線グラフとしてtrue表示に設定できます。また、現在のポイント、現在のポイントと次のポイントの間の開始、中間、終了を設定するように設定することもできます。
タグ
通常のアイテム: 右側の目アイコンをクリックして、通常のアイテム (マウスイベントに応答しない列) のラベルテキストを表示します。
場所: top、left、insideを含むがこれらに限定されない、ローソク足チャートの場所にタグを設定します。
テキストスタイル
色: 共通アイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
キーアイテム: 右側の目アイコンをクリックして、キーアイテムのラベルテキスト (マウスイベントに応答する列) を表示します。
場所: top、left、insideを含むがこれらに限定されない、ローソク足チャートの場所にタグを設定します。
テキストスタイル
色: メジャーアイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: キーアイテムラベルのフォントスタイル。
フォントの太さ: ハイライトラベルテキストのフォントの太さ。
フォント: ハイライトラベルテキストのフォントファミリ。
フォントサイズ: キーアイテムラベルのフォントサイズ。
要素スタイル
普通のアイテム
立ち上がりの色: カラーピッカーの説明を参照して、通常の要素の立ち上がりの色を変更します。
立ち上がり枠の色: 通常の要素の立ち上がり枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
ドロップカラー: カラーピッカーの説明を参照して、通常の要素のドロップカラーを変更します。
ドロップ枠の色: 通常の要素のドロップ枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠の太さを変更します。
ボーダースタイル: ボーダーのストロークタイプ。 このパラメーターはオプションで、SolidまたはDottedです。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。
主なアイテム
色: カラーピッカーの説明を参照して、ハイライト要素の背景色を変更します。
枠の色: メジャーアイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] 記号をクリックするか値を入力して、メジャーアイテムの枠の太さを変更します。
ボーダースタイル: ボーダーのストロークタイプ。 このパラメーターはオプションで、SolidまたはDottedです。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。
軸スタイル
普通のアイテム
色: ドロップダウンリストをクリックして、軸の色の塗りつぶしスタイルを選択します。カラー塗りつぶし、グラデーション塗りつぶしなどです。 カラーピッカーの説明を参照して、軸の色を変更します。
幅: [+] または [-] をクリックするか、値を入力して軸線の幅を変更します。
Type: 軸のストロークタイプ。 このパラメーターはオプションです。 有効な値: SolidおよびDotted。
不透明度: [+] または [-] 記号をクリックするか値を入力して、軸の透明度を変更します。 範囲は [0,1] です。
滑らかな曲線: 曲線が滑らかであるかどうかを表示するには、右側の目アイコンをクリックします。
単調平滑関数: 折れ線グラフの滑らかさを指定します。
ダウンサンプリング: データ量が現在のポイントよりもはるかに多い場合に折れ線グラフで使用されるダウンサンプリング戦略。 パラメータは、max、min、およびaverageを含むが、これらに限定されない。
静的: このチェックボックスをオンにすると、シリーズは応答せず、マウスイベントをトリガーします。
アニメーション: アニメーションを有効にするには、チェックボックスをオンにします。
[データ] タブ
設定フィールドの説明
列 | 説明 |
| 折れ線グラフの各x軸のカテゴリ、つまりx軸の値を設定するために使用します。 |
| その日のローソク足チャートの始値を設定するために使用される値。 |
| その日のローソク足チャートの終値の値を設定するために使用されます。 |
| ローソク足チャート日の最低価格の値を設定するために使用します。 |
| 当日のローソク足チャートの最高価格の値を設定するために使用します。 |
[インタラクション] タブ
説明
インタラクション | 説明 |
データ項目がクリックされたとき | ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 ローソク足チャートコンポーネントはインタラクティブな構成です。 クリックしてデータ項目を選択すると、コールバック値がスローされます。 デフォルトでは、データのvalueやopenなどのフィールドがスローされます。 詳細は、「コールバックIDの設定」をご参照ください。 |
凡例がクリックされたとき | ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 ローソク足チャートコンポーネントはインタラクティブな構成です。 凡例をクリックすると、コールバック値が返されます。 デフォルトでは、データ内の選択されたフィールドが返されます。 詳細は、「コールバックIDの設定」をご参照ください。 |
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" } }