DataV:スタック列チャートウィジェット

チャートスタイル

縦の積み重ねられたコラムチャートはタイプのコラムチャートです。 小さな視覚化アプリケーションスペースで多次元データの違いをインテリジェントに表示できます。 カスタムy軸間隔、マルチシリーズデータ構成、およびスタックデータ表示をサポートします。

設定パネル

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

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

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

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

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

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

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

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

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

• チャート

  • マージン: 縦棒グラフ領域とウィジェットの上下左右の境界線との間の距離。 単位: ピクセル。 デフォルト値: pixels。 アイコンをクリックして、カスタムマージンの表示を制御します。

  • 列の幅: 列の幅。 カスタム幅が大きすぎると、同じグループ内の異なる列が重複します。 幅の値は慎重に設定してください。 アイコンをクリックして、カスタム列幅の表示を制御します。

  • [列間の領域]: 異なるカテゴリの列と同じ一連のデータ間の接続領域のスタイル。 アイコンをクリックすると、接続エリアの表示を制御できます。

    パラメーター	説明
    トリガーモード	[接続] セクションの表示をトリガーするために使用されるトリガーメソッド。 [常に表示] 、[移動] 、または [クリック] を選択できます。
    ストロークカラー	接続領域のストロークの色。
    塗りつぶしの色	接続領域の塗りつぶしの色。

  • 値ラベル: 各列の値ラベルのスタイル。 アイコンをクリックすると、値のラベルを表示または非表示にできます。

    パラメーター	説明
    位置	値ラベルテキストの位置。 有効な値: Top、Middle、Bottom。
    テキストスタイル	値ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。
    オフセット	値ラベルの水平方向および垂直方向のオフセット値。

  • 凡例: 縦棒グラフの凡例スタイル。 アイコンをクリックして、凡例を表示または非表示にできます。

    パラメーター	説明
    ページング許可	スイッチをオンにすると、凡例の数が多すぎて配置できない場合にページをめくることができます。 スイッチをオフにすると、ページめくりはできません。
    レイアウト	ウィジェットの開始座標を基準とした凡例の位置。 Valides: Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right。
    凡例Tags	凡例タグの形状スタイルと凡例タグのサイズ値の設定を含む、凡例タグのスタイル。
    凡例テキスト	テキストのフォントスタイル /テキストの太さ /フォントサイズと色の設定を含む、凡例のテキストのスタイル。

• 座標軸: X軸またはY軸を選択できます。

  • X軸

    • 軸を表示: スイッチをオンにすると、ウィジェットのx軸スタイルが表示されます。 スイッチをオフにすると、ウィジェットのx軸スタイルは表示されません。

    • データ型: x軸上のデータの型。

      パラメーター	説明
      数値	整数や浮動小数点数などの数値データをサポートします。
      カテゴリ	文字や文字列などのカテゴリタイプのデータがサポートされています。
      時間	時間タイプのデータは、データ形式を設定する必要があります。

    • 軸ラベル: 縦棒グラフのx軸ラベルのスタイル。 アイコンをクリックすると、x軸ラベルを表示または非表示にできます。

      パラメーター	説明
      データフォーマット	表示するデータ形式。 このパラメーターは、時間ベースおよび数値データに対してのみ有効です。 YYYY/MM/DD HH:mm:ss時間、整数参照dおよび浮動小数点参照 .1fを参照してください。
      テキストスタイル	x軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。
      数量	x軸ラベルは数量値を示します。 アイコンをクリックして、x軸上のラベルの数を指定できます。

    • 軸タイトル: 縦棒グラフのx軸タイトルのスタイル。 アイコンをクリックすると、x軸のタイトルを表示または非表示にできます。

      パラメーター	説明
      タイトル	x軸タイトルのテキストコンテンツ。
      オフセット	x軸タイトルのオフセット値。 単位: ピクセル
      テキストスタイル	x軸タイトルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

    • 軸線: 縦棒グラフのx軸の軸スタイル。 アイコンをクリックして、x軸の軸スタイルを表示または非表示にすることができます。

      色: x軸の軸の色。

    • グリッド線: 縦棒グラフのx軸グリッド線のスタイル。 アイコンをクリックすると、x軸のグリッド線を表示または非表示にできます。

      色: x軸のグリッド線の色。

  • Y軸

    • 軸を表示: スイッチをオンにすると、ウィジェットのy軸スタイルが表示されます。 スイッチをオフにすると、ウィジェットのy軸スタイルは表示されません。

    • Range: y軸の最小値の範囲。 値をカスタマイズするか、値を選択できます。 アイコンをクリックして、y軸のカスタム範囲を表示または非表示にすることができます。

      • 0: デフォルトでは、y軸範囲の最小値は0です。

      • 最小データ値: データの最小値。

      説明

      y軸のカスタムデータ範囲を有効にすると、一部の最小データが無効になる場合があります。 カスタムデータ範囲を無効にすることを推奨します。

    • データ形式: y軸ラベル値の表示形式。 [デフォルト] 、11 (整数) 、11.1 (フロート) 、11.11 (フロート) 、11% 、11.1% 、または11.11% を選択できます。

    • 軸ラベル: 縦棒グラフのy軸ラベルのスタイル。 アイコンをクリックすると、y軸ラベルスタイルを表示または非表示にできます。

      パラメーター	説明
      テキストスタイル	y軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
      数量	y軸ラベルは数量値を示します。 アイコンをクリックすると、カスタム数のy軸ラベルを表示または非表示にできます。

    • 軸タイトル: 縦棒グラフのy軸タイトルスタイル。 アイコンをクリックすると、y軸のタイトルスタイルが表示されます。

      パラメーター	説明
      タイトル	y軸タイトルのテキストコンテンツ。
      オフセット	y軸タイトルのオフセット値。 単位: ピクセル
      テキストスタイル	y軸上のタイトルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

    • 軸線: 縦棒グラフのy軸の軸スタイル。 アイコンをクリックして、y軸を表示できます。

      色: y軸の色。

    • グリッド線: 縦棒グラフのy軸グリッド線のスタイル。 アイコンをクリックすると、y軸グリッド線を表示または非表示にできます。

      色: y軸上のグリッド線の色。

• シリーズ

  • CSVデータ: スイッチをオンにすると、CSVデータファイルの列を直接使用して、値とデータ系列にマッピングできます。 スイッチをオフにすると、[シリーズマッピング] 設定項目が有効になります。 アイコンをクリックすると、CSVデータスイッチを表示または非表示にできます。

    パラメーター	説明
    自動エキス	スイッチをオンにすると、ウィジェットはCSVデータを使用してフィールドを自動的に解析して表示します。 スイッチをオフにすると、フィールドは自動的に解析されません。
    数値フィールドのみ	スイッチをオンにすると、CSVデータはデータ型のフィールドに対してのみ解析されます。 スイッチをオフにすると、すべてのフィールドのCSVデータが自動的に解析されます。

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

    パラメーター	説明
    マッピングフィールド	列名 /フィールド名とシリーズ名の設定項目。 このパラメーターは、[CSVデータ] をオンにし、[フィールドの自動解析] 設定項目をオフにした場合にのみ有効になります。 列名 /フィールド名: データ系列フィールドの値。 フィールドの値をカスタマイズできます。 フィールドが空の場合、ウィジェットデータにsのフィールド値がシリーズフィールド値として表示されます。 このパラメーターが空でない場合は、データが返される順序を確認する必要があります。 シリーズ名: データシリーズシリーズの表示名。カスタマイズ可能です。 シリーズS値およびシリーズ表示設定項目は、CSVデータが非表示になり、シリーズマッピング設定項目スイッチがオンになっている場合にのみ有効になります。 Series s Value: データ系列マッピング値。カスタマイズ可能です。 このパラメーターを空のままにすると、コンポーネントデータのsフィールド値がシリーズフィールドマッピング値として表示されます。 このパラメーターが空でない場合は、データが返される順序を確認する必要があります。 Series Display: データ系列の表示名。カスタマイズ可能です。
    塗りつぶしの色	このシリーズの下の縦棒グラフの塗りつぶしの色。

  • シリーズマッピング: スイッチをオンにすると、このパラメーターはデータにシリーズs値が含まれている場合に有効になります。 [マッピングフィールド] パラメーターを使用して、特定のシリーズの色と名前を設定できます。 スイッチをオフにすると、[マッピングフィールド] 設定項目は無効になります。

• その他

  • 補助線: 縦棒グラフの補助線スタイル。 アイコンをクリックすると、補助線を有効または無効にできます。

    パラメーター	説明
    データ型	補助線のタイプ。 有効な値: 最小値、最大値、平均値、中央値。
    スタイル	補助線の色、線の太さ、線のスタイルなど、補助線のスタイル。
    補助の説明	以下を含む二次的な説明のスタイル。 Description: 補助的な説明テキスト。 位置: ガイドライン上のテキストの位置。 オフセット: テキストの水平方向または垂直方向のオフセット。 テキストスタイル: テキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。

  • 大量のデータに対するインタラクションの強化: 縦棒グラフに含まれるデータが多すぎる場合は、データインタラクションの強化スタイルを設定できます。 アイコンをクリックすると、インタラクション強化効果を有効または無効にできます。

    パラメーター	説明
    相互作用モード	データの相互作用のモード。 有効な値: SliderとScroll Bar。
    デフォルトの範囲	サムネイル軸に表示されるデータの範囲。 範囲は0〜1であり得る。 この設定項目は、Auxiliary Lineスタイルが有効な場合にのみ有効になります。
    スタイル	サムネイル軸の前景色と背景色。 この設定項目は、Auxiliary Lineスタイルが有効な場合にのみ有効になります。
    方向	スクロールバーの向き。 向きは水平または垂直です。 この設定項目は、Scroll Barスタイルが有効な場合にのみ有効になります。
    幅	データカテゴリ列の幅。 この設定項目は、Scroll Barスタイルが有効な場合にのみ有効になります。

  • ヒント: プレビューページまたは公開ページで、ポインターを上に移動するか、縦棒グラフをクリックしたときに表示されるダイアログボックスのスタイル。 アイコンをクリックして、ダイアログボックスをオンまたはオフにします。

    パラメーター	説明
    テキストスタイル	ダイアログボックス内のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。
    インジケータ	インジケーターの幅、線の種類、色など、プロンプトインジケーターのスタイル。 アイコンをクリックして、インジケータをオンまたはオフにします。
    背景ボックス	ダイアログボックスの背景ボックススタイル。 背景色: ダイアログボックスの背景色。 パディング: ダイアログボックスの内側の余白。 単位: ピクセル。 国境 枠の幅: ダイアログボックスの枠のサイズ。 単位: ピクセル。 枠の色: ダイアログボックスの枠の色。

データパネル

パラメーターフィールドの説明

相互作用パネル

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

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

2. 左上隅のアイコンをクリックします。

3. Blueprint Editorで、[追加ノード] ペインの [スタック列チャート] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、スタックされた縦棒グラフのパラメーターを設定できます。

   • イベント

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

   • Action

     Action	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、縦棒グラフのAPIデータソースがhttps:// api.testに設定され、Request data Interfaceに渡されるデータが { id: '1'} に設定されている場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     インポートデータインタフェース	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ハイライト	データ項目に対応する要素を強調表示します。 参照データの例は以下の通りである。 return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }
     ハイライトをキャンセル	データ項目に対応する要素の強調表示をキャンセルします。 参照データの例は以下の通りである。 return { "data": {}, "options": { "mode": "single" } }
     クリアウィジェット	ウィジェットテキストは、パラメータを指定する必要なく消去されます。
     ウィジェット設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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" } }