DataV:タイムピッカー

チャートスタイル

タイムピッカーは、カレンダーの背景色、カレンダーの日付と時刻のスタイル、および時間形式の種類をカスタマイズできるウィジェットです。 時間に基づいて他のウィジェットのデータをクエリして動的に表示できます。

設定パネル

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• 形式: 時間形式を指定します。 このパラメーターはオプションです。 詳細については、% Y-% m-% d % H:% M:% Sのスタイルをご参照ください。

• オプションの時間範囲: セレクターで時間範囲を設定します。 [開始時刻] および [終了時刻] の設定項目を設定します。 アイコンをクリックすると、オプションの時間範囲設定項目を有効または無効にできます。

• 時刻設定: アイコンをクリックして、時刻設定設定項目を有効または無効にします。

• グローバルスタイル

  • フォント: テキストフォント。 デフォルトのフォントは Microsoft YaHei です。

    説明

    オペレーティングシステムに既にインストールされているフォントを選択します。 フォントがインストールされていない場合、デフォルトのフォントが表示されます。

  • 入力ボックススタイル

    • インデント: テキストボックス内のテキストインデント。

    • 背景色: テキストボックスの背景色。

    • 通常のボーダースタイル

      パラメーター	説明
      ボーダー幅	ピクセル単位の境界線の幅。
      ボーダーカラー	ボーダーの色。
      ボーダーフィレット	ボタンの丸枠半径。 値の範囲は0〜360です。 値が0の場合、テキストボックスは正方形になります。 値が360の場合、テキストボックスは丸められます。

    • ホバーボーダースタイル

      パラメーター	説明
      ボーダー幅	テキストボックス上にポインターを移動したときの境界線の幅。 幅はピクセルの単位である。
      ボーダーカラー	テキストボックス上にポインターを移動したときに表示される境界線の色。
      ボーダーフィレット	テキストボックス上にポインターを移動したときの境界線の半径。 値の範囲は0〜360です。 値が0の場合、テキストボックスは正方形になります。 値が360の場合、テキストボックスは丸められます。

    • テキストスタイル

      パラメーター	説明
      フォントサイズ	テキストのフォントサイズ。
      フォントの色。	テキストボックス内のテキストの色。
      フォントの重み	テキストフォントの太さ。 デフォルト値はNormalです。

• カレンダーと時間パネルのスタイル: 時間ピッカーをクリックした後にプレビューまたは設定ページに表示されるカレンダーのスタイル。 このスタイル設定項目は、PCで有効になります。

  • 高さ: カレンダーの高さ。

  • パネルとテキストボックスの間隔: カレンダーの上部からテキストボックスまでの距離。

  • 枠半径: カレンダーの丸枠半径。 値の範囲は0〜360です。 値が0の場合、カレンダーフレームは正方形です。 値が360の場合、カレンダーフレームはラウンドになります。

  • 背景色: カレンダーの背景色。

  • トップスタイル

    • 日付テキストスタイル

      パラメーター	説明
      フォントサイズ	年と月のフォントサイズ。
      フォントの色。	年と月のフォントの色。
      フォントの重み	年と月のフォントの太さ。 デフォルト値はNormalです。

    • 時間テキストスタイル

      パラメーター	説明
      フォントサイズ	時間のフォントサイズ。
      フォントの色。	時間の色。
      フォントの重み	時間のフォントの太さ。 デフォルト値はNormalです。

    • トップバーの高さ (%): カレンダーのトップバーの高さ。 値の範囲は10〜20です。 このパラメーターは、カレンダーの高さに基づくパーセント値です。

    • 前の月と次の月のボタンのマージン: カレンダーの前月と次の月のアイコン間の距離。 値の範囲は0〜50です。

    • 年と月のドロップダウンリストボックスのマージン: カレンダーの年と月の間隔。 値の範囲は0〜50です。

    • ライン区切り文字スタイル

      パラメーター	説明
      カラー	カレンダーの上部にある分割線の色。
      コネクタ幅	カレンダーの上部にある分割線の幅。

  • ボディスタイル

    • ライン区切り文字スタイル

      パラメーター	説明
      カラー	カレンダーの主要部分の分割線の色。
      コネクタ幅	カレンダーの主要部分の分割線の幅。

    • 高さ: カレンダーの主要部分の高さ。

  • 日付スタイル

    • ヘッダー行スタイル: カレンダーテーブルのヘッダーのスタイル。

      パラメーター	説明
      背景色	カレンダーテーブルの背景色。
      ボーダースタイル	カレンダーテーブルのボーダー幅、ボーダーカラー、およびラウンドボーダー半径。 ラウンド境界半径の値の範囲は0〜360です。 値が0の場合、境界は正方形です。 値が360の場合、境界線は丸くなります。
      フォントサイズ	カレンダーテーブルのフォントサイズ。

    • 日付行スタイル: カレンダーテーブルの行と列のスタイル。

      • 通常のスタイル

        パラメーター	説明
        背景色	カレンダーテーブルの行と列の背景色。
        ボーダースタイル	カレンダーテーブルの行と列の境界線の幅、境界線の色、および丸枠の半径。 ラウンド境界半径の値の範囲は0〜360です。 値が0の場合、境界は正方形です。 値が360の場合、境界線は丸くなります。
        フォントの重み	カレンダーテーブルの行と列のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	カレンダーテーブルの行と列のフォントの色。

      • ホバーのスタイル: カレンダーテーブルの列または行の上にポインターを移動したときの表示スタイル。

        パラメーター	説明
        背景色	ポインタを列または行の上に移動したときのカレンダーテーブルの列または行の背景色。
        ボーダースタイル	カレンダーテーブルの列または行の上にポインターを移動したときの境界線の幅、境界線の色、および丸枠の半径。 ラウンド境界半径の値の範囲は0〜360です。 値が0の場合、境界は正方形です。 値が360の場合、境界線は丸くなります。
        フォントの重み	カレンダーテーブルの列または行の上にポインターを移動したときのフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	カレンダーテーブルの列または行の上にポインターを移動したときのフォントの色。

      • 選択スタイル: カレンダーテーブルの列または行を選択したときに表示されるスタイル。

        パラメーター	説明
        背景色	列または行を選択したときのカレンダーテーブルの列または行の背景色。
        ボーダースタイル	列または行を選択したときの、カレンダーテーブルの列または行の境界線の幅、境界線の色、および丸枠の半径。 ラウンド境界半径の値の範囲は0〜360です。 値が0の場合、境界は正方形です。 値が360の場合、境界線は丸くなります。
        フォントの重み	列または行を選択したときの、カレンダーテーブルの列または行のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	列または行を選択したときのカレンダーの列または行のフォントの色。

      • 現在の日付スタイル: カレンダーテーブルの列と行での現在の日付の表示スタイル。

        パラメーター	説明
        背景色	カレンダーテーブルの列と行の現在の日付の背景色。
        ボーダースタイル	カレンダーテーブルの列と行の現在の日付の境界線の幅、境界線の色、および丸枠の半径。 ラウンド境界半径の値の範囲は0〜360です。 値が0の場合、境界は正方形です。 値が360の場合、境界線は丸くなります。
        フォントの重み	カレンダーテーブルの列と行の現在の日付のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	カレンダーテーブルの列と行の現在の日付のフォントの色。

      • 前と次の月の日付のスタイル: カレンダーテーブルの列と行での前の月と次の月の日付の表示スタイル。

        パラメーター	説明
        背景色	カレンダーテーブルの列と行の前の月と次の月の日付の背景色。
        ボーダースタイル	カレンダーテーブルの列と行の前の月と次の月の日付の境界線の幅、境界線の色、および丸枠の半径。 ラウンド境界半径の値の範囲は0〜360です。 値が0の場合、境界は正方形です。 値が360の場合、境界線は丸くなります。
        フォントの重み	カレンダーテーブルの列と行の前の月と次の月の日付のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	カレンダーテーブルの列と行の前の月と次の月の日付のフォントの色。

      • Style for Days of Week: カレンダーヘッダーの1週間の日数の表示スタイル。

        パラメーター	説明
        フォントの色。	カレンダーヘッダーの1週間のフォントの色。
        フォントの重み	カレンダーヘッダーの1週間のフォントの太さ。 デフォルト値はNormalです。

  • 時間スタイル

    • 時間コンテナスタイル

      パラメーター	説明
      ボーダースタイル	時間ボックスの境界線の幅と色。
      フォントサイズ	タイムボックスのフォントサイズ。

    • タイムラインスタイル

      • 通常のスタイル

        パラメーター	説明
        背景色	時間行の背景色。
        フォントの重み	時間行のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	時間行のフォントの色。

      • マウスオーバーのスタイル: 時間行の上にポインターを移動したときの表示スタイル。

        パラメーター	説明
        背景色	ポインタをこの行の上に移動したときの時間行の背景色。
        フォントの重み	ポインタをこの行の上に移動したときの時間行のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	ポインタをこの行の上に移動したときの時間行のフォントの色。

      • 選択スタイル: 特定の時間行を選択したときの表示スタイル。

        パラメーター	説明
        背景色	時間行を選択したときの背景色。
        フォントの重み	この行を選択したときの時間行のフォントの太さ。 デフォルト値はNormalです。
        フォントの色。	この行を選択したときの時間行のフォントの色。

  • ボトムスタイル

    • 高さ: カレンダーの一番下のバーの高さ。

    • オフセット: 下のコンテンツと下の境界線の間の距離。

    • 现在のキースタイル

      パラメーター	説明
      フォントサイズ	現時点でのボタンのフォントサイズ。
      フォントの色。	現時点でのボタンのフォントの色。
      フォントの重み	現時点でのボタンのフォントの太さ。 デフォルト値はNormalです。
      左オフセット値	現時点でのボタンの左オフセット。
      最上位オフセット値	現時点でのボタンの上部オフセット。

    • パネル切り替えボタンのスタイル: 時間選択と時間ポイント選択の切り替えに使用できる切り替えボタン。

      パラメーター	説明
      フォントサイズ	パネル切り替えボタンのフォントサイズ。
      フォントの色。	パネル切り替えボタンのフォントの色。
      フォントの太さ	パネル切り替えボタンのフォントの太さ。 デフォルト値はNormalです。
      右オフセット値	パネル切り替えボタンの右オフセット。
      最上位オフセット値	パネル切り替えボタンの上部オフセット。

    • キースタイルの決定

      パラメーター	説明
      フォントサイズ	確認ボタンのフォントサイズ。
      フォントの色。	確認ボタンのフォントの色。
      フォントの重み	確認ボタンのフォントの太さ。 デフォルト値はNormalです。
      右オフセット値	確認ボタンの右オフセット。
      最上位オフセット値	確認ボタンの上部オフセット。
      背景色	確認ボタンの背景色。
      フィレ	確認ボタンの丸枠半径。 値の範囲は0〜360です。 値が0の場合、ボタンの境界は正方形です。 値が360の場合、ボタンの境界線は丸くなります。

  • 年の範囲: カレンダーの年の範囲。 値の範囲は1〜50です。

データパネル

設定フィールドの説明

相互作用パネル

タイムピッカーウィジェットの右側のパネルで、[インタラクション] タブをクリックします。 [on current time change] の右側にある [Enable] チェックボックスをオンにします。 時間ピッカーウィジェットは、ピッカーでの時間データの変更、データリクエストのトリガー、コールバック値の返却を可能にするインタラクション設定をサポートしています。 他のウィジェットのインタラクション設定を使用することもできます。 デフォルトでは、データパネルで設定されたtime、startTime、およびendTimeの値が返されます。 詳細は、「コールバックIDの設定」をご参照ください。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. ページの左上隅にあるアイコンをクリックします。

3. Blueprint Editorで、[ノードのインポート] ペインで [時間選択] ウィジェットをクリックします。 次の図に示すように、キャンバスでパラメーターを表示できます。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     データインターフェイス要求が失敗した場合	データインターフェイス要求が失敗したときに返され (要求はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     現在の時刻が変わったとき	イベントは、現在の時刻が変更されたときにデータ項目でトリガーされます。 データ項目は、変更された時間に対応する。

   • ポリシーアクション

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、タイムピッカーがAPIデータソースをhttps:// api.testとして設定され、リクエストデータインターフェイスに渡されるデータが { id: '1'} として設定されている場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     現在の時計の値を取得する	タイムピッカーの現在値が取得されます。
     コンポーネントをデフォルト値にクリア	デフォルト値が復元されます。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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" } };