このトピックでは、Echarts ウォーターフォール図のチャートスタイルと設定パネルについて説明します。
チャートスタイル
設定パネル 
- 設定項目を検索: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅にある [設定項目を検索] をクリックします。[検索] ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。あいまい一致がサポートされています。詳細については、「設定項目を検索」をご参照ください。
- サイズ: ウィジェットのサイズ (ピクセル単位の幅と高さ) を示します。
アイコンをクリックすると、ウィジェットの幅と高さを比例して調整できます。このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 - 位置: ウィジェットの位置。ピクセル単位の [X] 座標と [Y] 座標で示されます。[X 座標] は、ウィジェットの左上隅とキャンバスの左境界線との間のピクセル距離を示します。[Y 座標] は、ウィジェットの左上隅とキャンバスの上境界線との間のピクセル距離を示します。
- 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。単位は度 (°) です。次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます:
- [回転角度] スピンボックスに角度を直接入力するか、プラス記号 (+) またはマイナス記号 (-) をクリックして [回転角度] スピンボックスの値を増減させます。
アイコンの黒い点をドラッグします。
アイコンをクリックして、ウィジェットを水平方向に反転させます。
アイコンをクリックして、ウィジェットを垂直方向に反転させます。
- 不透明度: ウィジェットの不透明度。有効な値: 0 と 1。このパラメーターを [0] に設定すると、ウィジェットは非表示になります。このパラメーターを [1] に設定すると、ウィジェットは完全に表示されます。デフォルト値: [1]。
レンダリングエンジン: ウォーターフォール図のレンダリングエンジン。[canvas] と [svg] があります。
凡例: 右側の [目] アイコンをクリックして、凡例のスタイルを表示します。
水平位置: ドロップダウンリストをクリックし、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、[自動] はウィジェットの位置と向きに基づいて決定されます。
左揃え: グラフィックがテキストの左側にある場合は、[左揃え] になります。
中央揃え: 凡例のグラフィックがテキストと重なっている場合は、[中央揃え] になります。
右揃え: グラフィックがテキストの右側にある場合は、[右揃え] になります。
垂直位置: ドロップダウンリストをクリックし、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、[自動] はウィジェットの位置と向きに基づいて決定されます。
上揃え: グラフィックがウィンドウの上にある場合は、[上揃え] になります。
中央: グラフィックがウィンドウの中央にある場合は、[中央] になります。
下揃え: グラフィックがウィンドウの下にある場合は、[下揃え] になります。
向き: ドロップダウンリストから凡例の向きを選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直方向に分布します。
内側余白: + または - 記号をクリックするか、数値を入力して凡例の内側余白を調整します。単位: ピクセル。デフォルトの内側余白は 5 です。
要素の間隔: + または - 記号をクリックするか、数値を入力して凡例の各項目間の距離を調整します。水平レイアウトの場合は水平方向の間隔、垂直レイアウトの場合は垂直方向の間隔。
テキストスタイル
色: 凡例テキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリー。
フォントサイズ: + または - をクリックするか、値を入力して凡例のフォントサイズを変更します。
X 軸: [目] アイコンをクリックして X 軸を表示します。
位置: X 軸上のウィンドウの位置を指定します。
下: ウィンドウの下部にある X 軸の位置。
上: ウィンドウの上部にある X 軸の位置。
名前: X 軸の名前。
位置: X 軸上の名前の位置。[開始]、[終了]、または [中央] を選択できます。デフォルト値: [終了]。
名前のスタイル
色: X 軸の名前テキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: X 軸の名前のフォントスタイル。
フォントの太さ: X 軸の名前のフォントの太さ。
フォント: X 軸の名前のフォントファミリー。
フォントサイズ: + または - をクリックするか、値を入力して X 軸の名前のフォントサイズを変更します。
名前の間隔: + または - 記号をクリックするか、値を入力して軸と軸の間の距離を変更します。
名前を回転: + または - 記号をクリックするか、値を入力して軸名の回転角度を変更します。
逆再生: このチェックボックスをオンにすると、軸が逆方向に表示されます。このチェックボックスをオフにすると、軸が順方向に表示されます。
空白を残す: このチェックボックスをオンにすると、軸の両側が空白になります。このチェックボックスをオフにすると、軸の両側が空白になります。
静的: このオプションを選択すると、軸が静的な場合に軸を操作できなくなります。
軸: 右側の [目] アイコンをクリックして X 軸を表示します。
ゼロ上: X 軸または Y 軸の軸が、もう一方の軸のゼロスケール上にあるかどうかを示します。このパラメーターは、もう一方の軸が値軸で、ゼロスケールを含んでいる場合にのみ有効です。
線のスタイル
色: カラーピッカーの説明 を参照して、X 軸の線の色を変更します。
幅: + または - をクリックするか、値を入力して X 軸の幅を変更します。
タイプ: 軸のタイプ。オプション。有効な値: [実線]、[破線]、および [点線]。
不透明度: + または - 記号をクリックするか、値を入力して X 軸の透明度を変更します。範囲は [0,1] です。
目盛り: 右側の [目] アイコンをクリックして、X 軸の目盛りを表示します。
ラベルに合わせる: このチェックボックスをオンにすると、目盛りがラベルに揃えられます。このパラメーターは、カテゴリ軸の [空白を残す] を選択した後にのみ有効になります。
内側: このチェックボックスをオンにすると、軸の目盛りが内側を向きます。このチェックボックスをオフにすると、軸の目盛りが外側を向きます。
長さ: + または - をクリックするか、値を入力して目盛りの長さを変更します。
線のスタイル
色: カラーピッカーの説明 を参照して、目盛りの色を変更します。
幅: + または - 記号をクリックするか、値を入力して目盛りの幅を変更します。
タイプ: 軸のタイプ。オプション。値は [実線]、[破線]、または [点線] にすることができます。
透明度: + または - 記号をクリックするか、値を入力して目盛りの透明度を変更します。範囲は [0,1] です。
目盛りラベル: 右側の [目] アイコンをクリックして、X 軸の目盛りラベルを表示します。
内側: このチェックボックスをオンにすると、軸ラベルが内側を向きます。このチェックボックスをオフにすると、軸ラベルが外側を向きます。
回転: 目盛りラベルの回転角度。カテゴリ軸のカテゴリラベルが表示できない場合は、目盛りラベルを回転させて重ならないようにすることができます。回転角度の範囲は -90 度から 90 度です。
外側間隔: 目盛りラベルと軸の間の距離。
最小ラベルを表示: このオプションを選択すると、最小の目盛りラベルが表示されます。デフォルトでは、ラベルが重なっている場合、最小の目盛りラベルは表示されないように自動的に判断されます。
最大ラベルを表示: このオプションを選択すると、最大の目盛りラベルが表示されます。デフォルトでは、ラベルが重なっている場合、最大の目盛りラベルは表示されないように自動的に判断されます。
色: 軸の目盛りラベルの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 軸ラベルのフォントスタイル。
フォントの太さ: 軸ラベルテキストのフォントの太さ。
フォント: 軸ラベルテキストのフォントファミリー。
フォントサイズ: 軸目盛りラベルテキストのフォントサイズ。
分割線: 右側の [目] アイコンをクリックして、分割線を表示します。
線のスタイル
色: カラーピッカーの説明 を参照して、X 軸の分割線の色を変更します。
幅: + または - 記号をクリックするか、値を入力して X 軸の分割線の幅を変更します。
タイプ: X 軸の分割線のタイプ。オプション。値は [実線]、[破線]、または [点線] にすることができます。
透明度: + または - 記号をクリックするか、値を入力して X 軸の分割線の透明度を変更します。値の範囲は 0 から 1 です。
Y 軸: 詳細については、「X 軸」をご参照ください。
データスケーリング: [目] アイコンをクリックしてデータスケーリングを表示します。
背景色: データの背景色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
データシャドウ
線のスタイル
色: 線の色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
幅: + または - 記号をクリックするか、値を入力して線の幅を変更します。
タイプ: 軸のタイプ。[実線]、[破線]、および [点線] の値。
透明度: + または - 記号をクリックするか、値を入力して線の透明度を変更します。範囲は [0,1] です。
エリアスタイル
色: エリアの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
透明度: + または - 記号をクリックするか、値を入力して分割エリアの透明度を変更します。値の範囲は 0 から 1 です。
選択色: マウスが選択されたときのマウスの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
罫線色: 罫線の色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
ハンドルスタイル
色: カラーピッカーの説明 を参照して、ハンドル要素の背景色を変更します。
透明度: + または - 記号をクリックするか、値を入力してハンドルの透明度を変更します。値の範囲は 0 から 1 です。
リアルタイム: 右側の [目] アイコンをクリックして、リアルタイム効果を表示または無効にします。
テキストスタイル
色: テキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイル。
フォントの太さ: テキストのフォントの太さ。
フォント: テキストのフォントファミリー。
フォントサイズ: + または - をクリックするか、値を入力してテキストのフォントサイズを変更します。
フィルターモード: データのフィルターモード。[強力なフィルター]、[弱いフィルター]、[空のフィルター]、[フィルターなし] などがあります。
開始パーセンテージ: ウォーターフォール図データウィンドウの開始パーセンテージ。
終了パーセンテージ: ウォーターフォール図データウィンドウの終了パーセンテージ。
向き: ドロップダウンリストから向きを選択します。
[自動] を [自動] に設定すると、データは水平方向にスケーリングされます。
水平: データは水平方向にスケーリングされます。
垂直: データは垂直方向にスケーリングされます。
ダイアログボックス: 右側の [目] アイコンをクリックして、ダイアログボックスを表示します。
トリガータイプ: トリガーのタイプ。このパラメーターはオプションです。デフォルト値: [軸]。
データ項目: データ項目グラフのトリガー。散布図や円グラフなど、カテゴリ軸のないチャートで使用されます。
軸: 軸トリガー。縦棒グラフ、折れ線グラフ、およびカテゴリ軸を使用するその他のチャートで使用されます。
トリガーしない: 何もトリガーされません。
軸インジケーター: [目] アイコンをクリックして軸インジケーターを表示します。
タイプ: インジケーターのタイプ。有効な値: [ラインインジケーター]、[シャドウインジケーター]、および [クロスインジケーター]。
自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着します。この機能は、数値軸と時間軸でより意味があり、小さな数値ポイントを自動的に見つけることができます。
線のスタイル
色: カラーピッカーの説明 を参照して、インジケーターラインの色を変更します。
幅: + または - 記号をクリックするか、値を入力して線の幅を変更します。
タイプ: 線のタイプを示します。オプション。値は [実線]、[破線]、または [点線] にすることができます。
不透明度: + または - 記号をクリックするか、値を入力してインジケーターラインの不透明度を変更します。値の範囲は 0 から 1 です。
シャドウのスタイルを示します
色: カラーピッカーの説明 を参照して、シャドウの色を変更します。
透明度: + または - 記号をクリックするか、値を入力してシャドウの透明度を変更します。値の範囲は 0 から 1 です。
クロススタイルを示します
色: カラーピッカーの説明 を参照して、クロスの色を変更します。
幅: + または - 記号をクリックするか、値を入力して交差を示す線の幅を変更します。
タイプ: 交差のタイプを示します。オプション。有効な値: [実線]、[破線]、および [点線]。
透明度: + または - 記号をクリックするか、値を入力して交差の透明度を変更します。値の範囲は 0 から 1 です。
背景色: テキストラベルの背景色をダイアログボックスで指定します。
テキストスタイル
色: ダイアログボックスのラベルテキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルをダイアログボックスで指定します。
フォントの太さ: ラベルテキストのフォントの太さをダイアログボックスで指定します。
フォント: ラベルテキストのフォントファミリーをダイアログボックスで指定します。
フォントサイズ: ラベルテキストのフォントサイズをダイアログボックスで指定します。
シリーズ:
または 
アイコンをクリックして、条件付きスタイルを追加または削除します。
または 
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。
アイコンをクリックして、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。
名前: カスタムシリーズの名前。データ内の s フィールド値と組み合わせて使用する必要があります。
マーカーグラフィック: カスタムグラフィック。デフォルト値: [円]。タグタイプには、[なし]、[円]、[長方形]、[長方形]、[三角形]、[ひし形]、[プッシュピン]、および [矢印] があります。詳細については、ECharts 公式ウェブサイト をご覧ください。
マーカーサイズ: + または - 記号をクリックするか、値を入力してマーカーのサイズを変更します。単位: ピクセル。
アイコンを表示: [目] アイコンをクリックして、アイコンのスタイルを表示します。
ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効な場合にアニメーション効果が表示されます。
凡例インタラクションハイライト: このチェックボックスをオンにすると、凡例ホバーが開始されたときにインタラクションがハイライトされます。
ステップチャート: ウォーターフォール図のステップスタイルを設定します。[閉じる]、[現在のポイントで曲がる]、[中間点で曲がる]、[次のポイントで曲がる] などがあります。
ラベル: [目] アイコンをクリックして、ラベルのスタイルを表示します。
場所: ウォーターフォール図の位置に相当するラベルを設定します。[上]、[左]、[内側] などがあります。
配置距離: ウォーターフォール図の境界線とラベルの間の距離。
回転: ラベルを回転させる角度。カテゴリ軸のカテゴリラベルが表示できない場合は、ラベルを回転させて重ならないようにすることができます。回転角度の範囲は -90 度から 90 度です。
色: ラベルテキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリー。
フォントサイズ: ラベルテキストのフォントサイズ。
要素スタイル
色: カラーピッカーの説明 を参照して、要素スタイルの色を変更します。
透明度: + または - 記号をクリックするか、値を入力して交差の透明度を変更します。値の範囲は 0 から 1 です。
線のスタイル
色: 線の色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
幅: + または - 記号をクリックするか、値を入力して線の幅を変更します。
タイプ: 線のタイプ。オプション。値は [実線]、[破線]、または [点線] にすることができます。
透明度: + または - 記号をクリックするか、値を入力して線の透明度を変更します。有効な値: 0 から 1。
エリアスタイル
色: エリアスタイルの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
透明度: + または - 記号をクリックするか、値を入力してエリア交差の透明度を変更します。値の範囲は 0 から 1 です。
スムーズ曲線: + または - 記号をクリックするか、値を入力してウォーターフォールの滑らかさを変更します。単位: %。有効な値: [0,1]。
ラベリング曲線
線のスタイル
色: 線の色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
幅: + または - 記号をクリックするか、値を入力して線の幅を変更します。
タイプ: 線のタイプ。オプション。有効な値: [実線]、[破線]、および [点線]。
透明度: + または - 記号をクリックするか、値を入力して線の透明度を変更します。値の範囲は 0 から 1 です。
曲率: + または - 記号をクリックするか、値を入力して線の曲率を変更します。
アニメーション: シリーズのアニメーションを設定します。右側の [目] アイコンをクリックして、アニメーションスタイルを表示または非表示にします。
アニメーション: このチェックボックスをオンにすると、アニメーションが有効になります。
アニメーション期間: + または - 記号をクリックするか、値を入力して初期アニメーションの期間を変更します。単位: ミリ秒。
イージング効果: ドロップダウンリストからデータ更新アニメーションのイージング効果を選択します。デフォルト値は [cubicOut] です。
[データ] タブ
設定フィールドの説明
パラメーター | 説明 |
| ウォーターフォール図の各 X 軸のカテゴリ、つまり X 軸の値を設定するために使用されます。 |
| ウォーターフォール図の各ポイントの値を設定するために使用されます。 |
| (オプション) シリーズ値。[スタイル] パネルの [シリーズ] 設定項目と組み合わせて使用されます。 |
| パラメーター | 説明 |
| 制御モード | スイッチをオンにすると、ウィジェットの初期化時にデータはリクエストされません。データリクエストは、コールバック ID またはブループリントエディターで設定されたメソッドに基づいてのみトリガーされます。スイッチをオフにすると、データリクエストは自動的にトリガーされます。デフォルトでは、スイッチはオフになっています。 |
| 自動データリクエスト | [自動データリクエスト] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。このチェックボックスをオンにしない場合、データは自動的にリクエストされません。ページを手動でリフレッシュしてデータをリクエストするか、ブループリントエディターまたはコールバック ID イベントを使用してデータリクエストをトリガーする必要があります。 |
| データソース | キャンバスエディターの右側のパネルで、[データ] タブをクリックします。[静的データ] の横にある [設定] をクリックします。[データソースの設定] パネルで、[データソースタイプ] ドロップダウンリストからデータソースを選択します。コードエディターにデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。詳細については、「アセットデータを設定する」をご参照ください。 |
| データフィルター | [データフィルター] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。[フィルターを追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。詳細については、「データフィルターを使用する」をご参照ください。 |
| データ応答結果 | データリクエストへの応答。データソースが変更された場合は、[データ応答結果] の横にある  アイコンをクリックして、データ応答をリアルタイムで表示できます。 |
[インタラクション] タブ
インタラクションの説明
インタラクション | 説明 |
データ項目がクリックされたとき | [有効化] チェックボックスをオンにして、ウィジェット間のインタラクションを有効にします。[ウォーターフォール図] ウィジェットにはインタラクティブな設定があります。データ項目が選択されると、コールバック値が返されます。デフォルトでは、データ内の x および y フィールドが返されます。詳細については、「コールバック ID を設定する」をご参照ください。 |
凡例がクリックされたとき | [有効化] チェックボックスをオンにして、ウィジェット間のインタラクションを有効にします。[ウォーターフォール図] ウィジェットにはインタラクティブな設定があります。凡例がクリックされると、コールバック値が返されます。デフォルトでは、データ内の selected フィールドが返されます。詳細については、「コールバック ID を設定する」をご参照ください。 |
データスケールが変更されたとき | [有効化] チェックボックスをオンにして、ウィジェット間のインタラクションを有効にします。[ウォーターフォール図] ウィジェットにはインタラクティブな設定があります。データスケーリングが変更されると、コールバック値が返されます。デフォルトでは、データ内の start および end フィールドが返されます。詳細については、「コールバック ID を設定する」をご参照ください。 |
ブループリントエディターでインタラクションを設定する
キャンバスエディターで、[レイヤー] パネルのウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。
左上隅の
アイコンをクリックします。ブループリントエディターで、[インポートノード] ペインの [ウォーターフォール図] ウィジェットをクリックします。次の図に示すように、キャンバスでパラメーターを表示できます。
イベント
イベント
説明
データインターフェイスリクエストが完了したとき
このイベントは、データインターフェイスリクエストが応答され、フィルターによって処理された後、処理済みの JSON データとともにトリガーされます。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルの [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイスリクエストが失敗したとき
データインターフェイスリクエストが失敗したとき (リクエストはネットワークの問題やインターフェイスのエラーが原因である可能性があります) に返され、フィルターによって処理されるイベント。このイベントは、処理済みの JSON データもスローします。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルの [データ] タブの [データ応答結果] セクションをご参照ください。
データ項目がクリックされたとき
ウォーターフォール図の列がクリックされたときに発生するイベントで、列に対応するデータ項目も発生します。
凡例がクリックされたとき
ウォーターフォール図の凡例がクリックされたときに発生するイベントで、列に対応するデータ項目も発生します。
データスケールが変更されたとき
データスケールが変更されたときに発生するイベントで、バーに対応するデータ項目も発生します。
操作
ポリシー操作
説明
データインターフェイスをリクエスト
この操作は、サーバーデータを再度リクエストするために実行されます。上流のデータ処理ノードまたはレイヤーノードから送信されたデータがパラメーターとして使用されます。たとえば、API データソースが
https://api.testに設定され、[データインターフェイスをリクエスト] に渡されるデータが{ id: '1'}に設定されている場合、最終的なリクエストインターフェイスはhttps://api.test?id=1になります。データをインポート
ウィジェットのデータが描画形式に従って処理された後、ウィジェットが再描画のためにインポートされます。サーバーデータを再度リクエストする必要はありません。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルの [データ] タブの [データ応答結果] セクションをご参照ください。
ハイライト
操作の入力データはオブジェクトタイプです。パラメーターには、
seriesName(シリーズ名)、seriesIndex(シリーズインデックス)、dataIndex(データインデックス)、およびname(データ名) が含まれます。サンプルデータ:{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }ハイライト解除
操作の入力データはオブジェクトタイプです。パラメーターには、
seriesName(シリーズ名)、seriesIndex(シリーズインデックス)、dataIndex(データインデックス)、およびname(データ名) が含まれます。サンプルデータ:{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }ダイアログボックスを表示
操作の入力データはオブジェクトタイプです。パラメーターには、
dataindex(データインデックス)、name(データ名)、x(x 軸位置)、およびy(y 軸位置) が含まれます。サンプルデータ:{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }ダイアログボックスを非表示
ダイアログボックスを非表示にします。パラメーターは不要です。
凡例コントロール
操作の入力データはオブジェクトタイプです。パラメーターには、
type(凡例操作タイプ) とname(凡例名) が含まれます。サンプルデータ:{ "type": "legendToggleSelect", "name": "" }コンポーネント設定を更新
ウィジェットのスタイル設定が動的に更新されます。この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルで [設定] タブをクリックし、[設定を...にコピー] をクリックしてウィジェット設定を取得する必要があります。 その後、ブループリントエディターでデータ処理ノードのスタイルフィールドを変更します。
表示
ウィジェットを表示します。次の例は参照データを示しています。
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{ // 配置タイプ。to は絶対配置を示し、by は相対配置を示します。デフォルト値は to です。 "positionType": "to", // x 座標と y 座標で示される場所。 "attr": { "x": 0, "y": 0 }, // アニメーションタイプ。 "animation": { "enable": false, // アニメーションが表示される期間。 "animationDuration": 1000, // アニメーションカーブ。linear|easeInOutQuad|easeInOutExpo に設定できます。 "animationEasing": "linear" } }