DataV:プログレスチャートを含む表

チャートスタイル

プログレスバーテーブルは、プログレスバーとテーブルで構成されるウィジェットです。 テーブル、テーブル列、およびページめくりデバイスのスタイルを設定できます。

設定パネル

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

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

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

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

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

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

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

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

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

• テーブル

  • ヘッダー: ヘッダースタイルを設定します。 をクリックして、ヘッダーの表示を制御できます。

    パラメーター	説明
    テキストの配置	ヘッダーの配置モード。The alignment mode of the header. 左、中央、または右を選択できます。
    テキストスタイル	テキストのフォントスタイル、テキストの太さ、フォントサイズ、色など、ヘッダーテキストのスタイル。
    選択したスタイルの並べ替え	プレビューおよび公開中に、ヘッダーの列の並べ替えボタンをクリックして選択したときに表示される色。 説明 並べ替えスタイルパラメーターは、[列の設定] セクションで列の並べ替えをオンにした後にのみ設定できます。
    ボーダースタイル	ヘッダーセクションの境界線スタイル (境界線の幅と境界線の色を含む) 。
    背景色	ヘッダーセクションの背景色。
    列の高さ	テーブルヘッダーの行の高さの値。

  • シリアル番号列: テーブルのシリアル番号列スタイルを設定します。 をクリックすると、シリアル番号列の表示または非表示を制御できます。

    パラメーター	説明
    列フィールド名	シーケンス番号列のフィールドの名前。 フィールドはデータパネルのフィールドと一致する必要があります。 デフォルトでは、imgSrcフィールドが一致します。
    ヘッダーの内容	シリアル番号列のヘッダーに表示される内容です。
    列幅の割合	シリアル番号列の列幅の割合。 値が大きいほど幅が大きいことを示す。
    画像サイズ	画像の幅と画像の高さを含む、序数列の画像サイズスタイル。
    テキストスタイル	テキストのフォントスタイル、テキストの太さ、フォントサイズ、色など、シーケンス番号列のテキストスタイル。
    テキストの背景	背景の幅、背景の高さ、角の丸み、背景色など、序数列のテキストの背景スタイル。

  • ハイパーリンク設定: テーブルのハイパーリンク設定スタイルを設定します。 クリックして、ハイパーリンク設定を表示または非表示にできます。

    パラメーター	説明
    ハイパーリンクフィールド名	ハイパーリンクフィールドの名前。 データパネルでハイパーリンクリンクフィールドを設定する必要があります。 テーブルの行にハイパーリンクを設定したら、行の任意の場所をクリックしてハイパーリンクにジャンプします。
    Open in new window	スイッチをオンにすると、ジャンプハイパーリンクは新しいwebページウィンドウを開きます。スイッチをオフにし、元のページジャンプのハイパーリンクをオンにします。

  • 仮想スクロール: テーブルの仮想スクロールを指定します。 クリックして仮想スクロールを表示または非表示にできます。

    コンテンツエリアの高さ: コンテンツエリアの高さ。 コンテンツエリアの高さがコンテンツエリアの高さよりも大きい場合、スクロールバーがコンテンツエリアに表示されます。

    説明

    データのID値が一意であることを確認してください。

  • ページごとの行数: テーブルの各ページに表示できる行数。

  • テキストスタイル: 表のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。

  • 基本スタイル: テーブルの基本スタイル。

    パラメーター	説明
    オープンシマウマ交差点	ゼブラ交差スタイルを有効にするにはスイッチをオンにします。ゼブラ交差スタイルを無効にするにはスイッチをオフにします。
    テーブルの背景色	テーブルの背景色。
    列の高さ	テーブル内の各行の高さ。
    テキストの配置	テーブル配置モード。 左、中央、または右を選択できます。

  • Table Border: 境界線の幅と色を含む、テーブルの境界線のスタイル。

  • マージン: テーブルの内側の境界とテーブルの上下左右の境界との間の距離。

• ページタービン

  パラメーター	説明
  ページターナー非表示	スイッチをオンにしてページチェンジャースタイルを非表示にすると、ページチェンジャーのすべてのパラメーターを設定できません。 スイッチをオフにしてページチェンジャスタイルを非表示にすると、ページチェンジャスタイルが表示されます。 以下のパラメーターを設定できます。
  単一ページを隠す	スイッチをオンにすると、テーブルに1ページのコンテンツしかない場合、ページチェンジャスタイルは非表示になります。 スイッチをオフにすると、ページチェンジャーのスタイルが常に表示されます。
  一般設定	page-paderスタイルの一般設定 (サイズの選択、配置、page-padderの前後のスタイルの選択など) 。
  ページ番号	ポケットベルのページ数。 ページ数が多すぎる場合は、そのページのページ数が表示されます。 その他の省略記号 (...) が代わりに使用されます。
  楕円の色	ページ番号が多すぎる場合に使用される省略記号の色。
  入力ボックス	スイッチをオンにして、ページめくり入力ボックスを開きます。 ページ数が多すぎる場合は、[入力へのジャンプ] ボックスに記載されているページ番号が表示され、[OK] をクリックしてジャンプします。 ページ番号は、ページの総数がページ番号より大きい場合に有効になります。 スイッチをオフにして、入力ボックスのページ番号ジャンプ効果を無効にします。
  現在のページスタイル	ページめくりデバイスの現在のページスタイル。現在のページのテキストの色と背景の色が含まれます。
  通常のページスタイル	他のページの通常のテキスト色と背景色を含む、ページめくりデバイスの通常のページスタイル。
  利用できないスタイル	使用できないスタイルのテキストの色や背景色など、ページめくりに使用できないスタイル。
  マージン	テーブルの上、下、左、および右からのポケットベル境界の距離。

• テーブル列

  右側のまたはアイコンをクリックして、列設定を追加または削除します。 またはアイコンをクリックして、複数の列の配置スタイルを設定します。 アイコンをクリックして、選択した列設定をコピーし、同じ設定の列を追加します。

  • 列フィールド名: 列フィールドの名前。データのフィールドと一致する必要があります。

  • 列名: テーブルヘッダーの列の名前。 名前はデータのフィールドと一致する必要があります。

  • 列の幅: 列の幅。 値が0の場合、列の幅はアダプティブです。 コンテンツの幅が列の幅を超える場合は、コンテンツの幅を使用して、コンテンツが正確に表示されるようにします。

  • ソート可能: スイッチをオンにすると、現在の列のヘッダーにソートボタンが表示されます。 [並べ替え] ボタンをクリックして、テーブル内のデータの並べ替えスタイルを選択できます。 スイッチをオフにすると、現在の列のヘッダーに [並べ替え] ボタンが表示されず、現在の列をクリックしてテーブルデータを並べ替えることができません。

    説明

    テーブルの値がプログレスバーの場合、Sortableスイッチがオンになっているかどうかにかかわらず、テーブルデータをソートできません。

  • インジケータートレンド: をクリックして、インジケータートレンドスタイルを有効にします。

    パラメーター	説明
    アイコン	インジケーターのトレンドアイコンのスタイル。 5つのアイコンスタイルを選択し、アイコンサイズを設定できます。 アイコンのスタイルをオンにするには、をクリックします。
    トレンドカラー	上昇、フラット、下降の3つのトレンドの色。
    テキストの色の同期	スイッチをオンにすると、アイコンの色は数値テキストの色と同期します。スイッチをオフにすると、色は同期しません。
    メトリック設定	指標の基本値と数値サフィックスのスタイルを設定します。
    千のセパレータ	千は区切り記号を区切ります。 [数千区切り] スタイルをクリックして開きます。 説明 複数の数千区切り記号が入力された場合、デフォルトでは最初の桁の記号のみがデータの数千区切り記号として使用され、数値は数千区切り記号として使用できません。
    表示	スイッチをオンにすると、インジケータートレンドスタイルの無効なデータが表示されることがあります。 スイッチをオフにすると、インジケータートレンドスタイルの無効なデータは表示されません。 説明 すべてのデータが有効な場合は、この設定を無視します。

  • 進行状況チャート: をクリックして進行状況チャートスタイルを有効にします。 進捗チャートの値は、numberデータ型に設定する必要があります。

    パラメーター	説明
    進行状況チャートフォーム	進捗チャートの形状。 [Ring] または [Bar] を選択できます。
    セクション	進捗チャートの進捗色、背景色、および進捗バーの寸法。
    値情報	値の正確な数字、接尾辞のスタイル、フォント、テキストの太さ、フォントサイズ、および色。 クリックして数値情報スタイルを開きます。

データパネル

設定フィールドの説明

相互作用パネル

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

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

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

3. Blueprint Editorで、[追加されたノード] ペインで [進行状況チャート付きテーブル] コンポーネントをクリックします。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     データインターフェイス要求が失敗した場合	データインターフェイス要求が失敗したときに返され (要求はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     1行がクリックされたとき	進行状況バーテーブルの行をクリックすると、現在の行のデータがスローされます。
     [ページ区切り] をクリックしたとき	進行状況バーテーブルのページがクリックされると、現在のページのデータがスローされます。
     [並べ替え]	進行状況バーテーブルのソートキーの1つをクリックすると、現在ソートされているデータがスローされます。
     [複数選択] をクリックしたとき	進行状況バーテーブルの [選択] 列で [マルチオプション] をクリックすると、現在のマルチオプションのデータがスローされます。
     アクションアイテムがクリックされたとき	プログレスバーテーブルの操作項目ボタンをクリックすると、現在の操作項目のデータが表示されます。

   • ポリシーアクション

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに渡されるデータが { id: '1'} で設定されている場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ジャンプ先	ウィジェットをページにリダイレクトします。 デフォルトでは、ページは0から始まります。 参照データの例は以下の通りである。 return { "current":1 // If you are redirected to the fourth page,{current:3} }
     ハイライトテーブル行	テーブル行のハイライトに対応する要素を指定します。 参照データの例は以下の通りである。 return { "data": { id:3, // The data to be highlighted. name: 'Zhang San' }, "style": { color:'#ff0', // The style of the highlighted data. background:'#f00' } }
     行の強調表示をキャンセル	テーブル行の対応する要素のハイライトを解除します。
     クリアハイライト	ウィジェットのすべてのハイライト効果をクリアします。 パラメータは必要ありません。
     選択列を開く	プログレスバーテーブルで選択した列に対応するデータコンテンツを開きます。
     選択列の無効化	プログレスバーテーブルで選択した列に対応するデータコンテンツを非表示にします。
     オープン操作列	進行状況バーテーブルの [操作] 列でデータを開きます。
     操作列の無効化	テーブルのアクション列の進行状況バーを非表示にします。
     選択した値の設定	選択した値のパラメータの内容を設定します。 参照データの例を次に示します。 return { "value": 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" } };