DataV:基本カラムチャート (v3.0以降)

パラメーター

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

• グローバルスタイル

  • フォント: 縦棒グラフ内のすべてのテキストのフォントファミリ。 デフォルト値: Microsoft Yahei

  • 列スタイル: 縦棒グラフの各列のスタイル。

    • 列間の間隔: 列間の距離。 有効な値は 0～1 です。

    • Spacing: ウィジェットの左右の列と左右の境界線の間の距離。 有効な値は 0～1 です。

    • 背景色: 列の背景色。 詳細については、「カラーピッカーの手順」をご参照ください。

  • マージン: 縦棒グラフ領域とウィジェットの上下左右の境界線との間の距離。

    • Top Edge: 列の上端とコンポーネントの上端の間の距離。

    • 下部マージン: 列の下部とコンポーネントの下端の間の距離。

    • 左マージン: コンポーネントの左端の列と左の境界の間の距離。

    • 右マージン: 右端の列とウィジェットの右枠の間の距離。

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

    • テキストスタイル

      • フォントサイズ: ラベルテキストのフォントサイズ。

      • 色: 値ラベルテキストの色。

      • フォントの太さ: 値タグテキストのフォントの太さ。

    • Yオフセット: 列の先頭からの値ラベルのオフセット。 値が負の場合、値は上向きにオフセットされます。 値が正の場合、値は下方向にオフセットされます。

    • Xオフセット: 列の左側からの値ラベルのオフセット。 値が負の場合、値は左にシフトされます。 値が正の場合、値は右にシフトされます。

  • 最大負荷: システムは、レイアウト、図面、およびコンピューティング用に入力するデータレコードの最大数を読み込みます。 これにより、視覚化されたアプリケーションが有効になります。

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

  • テキストスタイル

    • 色: x軸上のテキストの色。

    • フォントサイズ: x軸上のテキストのフォントサイズ。 有効な値: 10 ~ 100

    • フォントの太さ: x軸上のテキストのフォントの太さ。

  • インジケーターの長さ: x軸上のインジケーターポイントの長さ。 有効な値: 0〜40。

  • テキストから二次線までの距離: x軸上のテキストと二次線の間の距離。 有効な値: -40〜40。

  • 補助線: このスイッチをオンにすると、x軸の補助線が表示されます。

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

  • テキストスタイル

    • 色: y軸上のテキストの色。

    • フォントサイズ: y軸のテキストのフォントサイズ。 有効な値: 10 ~ 100

    • フォントの太さ: y軸のテキストのフォントの太さ。

  • 単位: y軸上の値の単位。

  • 最小値: y軸の最小値。 指定または選択する値を入力できます。

    • 0

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

    • 自動丸め: データの最大値、最小値、およびメトリックポイント数が自動的に計算されます。

  • 最大値: y軸の最大値。 指定または選択する値を指定できます。

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

    • 自動丸め: データの最大値、最小値、およびメトリックポイント数が自動的に計算されます。

  • 数量: 軸上のポイントの数。

  • テキストから二次行までの距離: テキストと二次行の間の距離。 有効な値: -40〜40。

  • 補助線: スイッチをオンにして、y軸の補助線を表示します。

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

  図 1. ダイアログボックスパネル

  • トリガータイプ: トリガーするターゲットのタイプを示すダイアログボックス。 このフィールドはオプションで、[データ項目] と [軸] を含みます。

  • トリガーアクション: トリガーするアクションのダイアログボックス。 このフィールドはオプションで、[ホバー] と [クリック] を含みます。

  • 消える遅延時間: トリガー条件が満たされない場合、ダイアログボックスは消えます。 この設定項目は、ダイアログボックスが消えるまでの遅延時間を設定します。 単位：ms。

  • 背景ボックススタイル: ダイアログボックスの背景ボックススタイル。

    • 背景色: ダイアログボックスの背景色。

    • カスタム背景ボックスサイズ: ダイアログボックスの幅と高さ (px単位) 。

    • Pin: ダイアログボックスの内側の余白。 単位: ピクセル。

    • 水平オフセット: マウスの矢印に対するダイアログボックスの水平オフセット。 単位: ピクセル

    • 垂直オフセット: マウスの矢印に対するダイアログボックスの垂直オフセット。 単位: ピクセル

    • 枠の色: ダイアログボックスの枠の色。

    • 枠のサイズ: ダイアログボックスの枠のサイズ。 単位: ピクセル。

  • テキストスタイル: ダイアログボックス内のテキストのスタイル。

    • 色: テキストの色を表示します。

    • フォント: テキストのフォントファミリを表示します。

    • フォントサイズ: テキストのサイズを表示します。

    • フォントの太さ: テキストのフォントの太さを表示します。

  • 軸インジケーター: ダイアログボックスのトリガータイプが軸で、トリガーアクションが実行されたときに表示される軸インジケーターのスタイル。

    • Type: 軸インジケーターのタイプ。 Line Indicatorのみがサポートされています。

    • 線のスタイル: 線の色、幅、線の種類を示します。 行タイプはオプションです。 有効な値: Solid Line、Dotted Line、Dotted Line。

• data series: 右側のまたはアイコンをクリックして、データシリーズを追加または削除します。

  • シリーズの色: シリーズ内の列の色。

  • シリーズからタイプ

    • 有効にすると、データ系列モードはタイプモードに変わります。 データ内のsフィールドと共に使用する必要があります。 sフィールドは、列のタイプを定義し、データ系列に対応する。 各列に表示されるスタイルは、複数のタイプのいずれかである必要があり、カテゴリは1つのタイプのみを表すことができます。

    • 閉じると、ディスプレイはデータ系列モードになります。 データ内のsフィールドと共に使用する必要があります。 sフィールドは、列のタイプを定義し、データ系列に対応する。 たとえば、2つのシリーズを設定すると、各カテゴリに2つの列が表示されます。 列の値が0であっても、その列は1つの列の位置を占める。

• アニメーション: 縦棒グラフのアニメーション効果のスタイル。 アイコンをクリックすると、アニメーション効果を有効または無効にできます。

  • 初期アニメーション期間: コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。

  • EASING: アニメーションのイージング効果。 このシステムは、さまざまな共通の緩和効果を提供します。

  • 各シリーズのシーケンシャルアニメーション: スイッチをオンにすると、各シリーズの棒グラフがアニメーションを順番に再生します。スイッチをオフにすると、すべての列がアニメーションを一緒に再生します。

  • 更新アニメーション期間: ウィジェットデータが更新されたときのアニメーションの期間。 単位：ms。

  • 前の位置から開始: スイッチをオンにすると、ウィジェットデータが更新されたときに前の位置からアニメーションが開始されます。 スイッチをオフにすると、ウィジェットデータが更新されたときの初期位置からアニメーションが開始されます。

フィルタリングテーブルのメタデータ。

[
  {
    "x": "Shanghai",
    "y": 23
  },
  {
    "x": "Shenzhen",
    "y": 13
  },
  {
    "x": "Hefei",
    "y": 2
  },
  {
    "x": "Chengdu",
    "y": 9
  },
  {
    "x": "Anhui",
    "y": 5
  },
  {
    "x": "Beijing",
    "y": 10
  },
  {
    "x": "Hangzhou",
    "y": 14
  },
  {
    "x": "Changsha",
    "y": 24
  }
]

相互連携

ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 基本縦棒グラフの列をクリックすると、データ要求がトリガーされ、コールバック値がスローされ、さまざまな列のデータが動的に読み込まれます。 デフォルトでは、x、y、sの値が返されます。 詳細は、「コールバックIDの設定」をご参照ください。

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

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

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

3. Blueprint Editorで、[追加されたノード] ペインで [基本的な縦棒グラフ] をクリックします。 キャンバスでは、次の図に示すように、ブループリントエディターで基本的な縦棒グラフパラメーターを表示できます。

   • イベント

     イベント	説明
     基本的な縦棒グラフインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータについては、「データ」をご参照ください。
     データ項目がクリックされたとき	ベース縦棒グラフの列がクリックされたときに発生するイベントと、その列に対応するデータ項目。

   • ポリシーアクション

     ポリシーアクション	説明
     リクエスト基本縦棒グラフインターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、基本縦棒グラフがhttp:// API. testとしてapiデータソースで構成され、要求基本縦棒グラフインターフェイスに渡されるデータが { id: '1'} として設定されている場合、最終的な要求インターフェイスはhttp:// api.test?id=1です。
     インポート基本的な縦棒グラフインターフェイス	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータについては、「データ」をご参照ください。
     ハイライト	データ項目に対応する要素を強調表示します。 例： { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     ハイライト解除	データ項目に対応する要素の強調表示をキャンセルします。 例： { data: { x: 'Shanghai' }, options: { mode: 'single' // If the value is single, only one highlight is canceled when multiple data items are hit. If the value is multiple, all highlights are canceled when multiple data items are hit. } }
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
     非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。
     暗黙の状態への切り替え	ウィジェットは非表示または表示されます。
     移動	ウィジェットが指定された場所に移動されます。 { // 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" } }