すべてのプロダクト
Search

このプロダクト

    DataV:バーラインの組み合わせチャートウィジェット

    ドキュメントセンター

    DataV:バーラインの組み合わせチャートウィジェット

    最終更新日:Jul 16, 2024

    このトピックでは、折れ線グラフのグラフスタイルと構成パネルについて説明します。

    チャートスタイル

    折れ線棒グラフは棒グラフの一種です。 縦棒グラフまたは折れ線グラフを使用して、同じカテゴリ内の2つのディメンションの値を表すことができます。 限られたスペースで、カテゴリ間およびカテゴリ内のデータの違いを明確かつインテリジェントに表示できます。

    image..png

    設定パネル image..png

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

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

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

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

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

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

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

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

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

    • グローバルスタイル image..png

      • フォント: ウィジェット内のすべてのテキストのフォントファミリ。 デフォルト値: Microsoft Yahei

      • マージン

        • 上: チャートとウィジェットの上部境界の間の距離。

        • 下: チャートとウィジェットの下の境界との間の距離。

        • Left: チャートとウィジェットの左境界の間の距離。

        • Right: チャートとウィジェットの右枠の間の距離。

      • バー

        • 内側のパディング: 列間の距離。 有効な値は 0～1 です。

        • 外側パディング: 上下の列と軸の間の距離。 有効な値は 0～1 です。

        • 色: 列の背景色。

      • データ制限: システムは、レイアウト、図面、およびコンピューティング用に入力するデータレコードの最大数まで読み込みます。 これは、アイコンがy軸の表示および非表示を制御することを確実にする。

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

      • テキストスタイル

        • フォントサイズ: x軸上のテキストのサイズ。

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

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

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

        • 角度: 軸ラベルの角度。 有効な値: 水平、斜め、および垂直。

        • 数量: 軸ラベルの数。

      • 軸線: x軸の軸スタイル。 目のアイコンをクリックして軸を表示できます。

        • 色: 軸の色。

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

        • 色: ネットワークケーブルの色。

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

      • テキストスタイル

        • フォントサイズ: 左側のy軸のテキストのサイズ。

        • 色: 左側のy軸のテキストの色。

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

      • 軸ラベル: 左側のy軸の軸ラベルスタイル。 アイコンをクリックすると开关图标、軸ラベルを表示または非表示にできます。

        • Min: 左側のy軸の最小値の表示モード。 値を入力するか、値を選択できます。

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

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

          • 自動丸め: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。

        • Max: 左側のy軸の最大値。 値を入力するか、値を選択できます。

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

          • 自動丸め: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。

        • 数量: 軸ラベルの数。

        • 表示形式: 左側のy軸ラベルの値の表示形式。 検証値には、Default、11 (Integer) 、11.1 (Float) 、11.11 (Float) 、11% 、11.1% 、および11.11% が含まれます。

      • 軸単位: 左側のy軸の単位。 アイコンをクリックする开关图标と、軸単位を表示または非表示にできます。

      • Axis Line: 左側のy軸の軸スタイル。 アイコンをクリックして开关图标軸を表示できます。

        色: 軸の色。

      • グリッド線: 左側のy軸のグリッド線のスタイル。 アイコンをクリックすると开关图标、グリッド線の外観や隠蔽を制御できます。

        色: グリッド線の色。

    • Y2軸: 右軸のスタイルを縦棒グラフにします。 アイコンをクリックし开关图标て、軸の視覚化を制御できます。 image..png

      • テキストスタイル

        • フォントサイズ: 右軸のテキストのサイズ。

        • フォントの色: 右軸の行テキストの色。

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

      • 軸ラベル: 右側の軸線のラベルスタイル。 アイコンをクリックすると开关图标、ラベルを表示または非表示にできます。

        • Min: 右軸の最小値の表示モード。 値を入力するか、値を選択できます。

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

          • 自動丸め: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。

        • Max: 右軸の最大値。 値を入力するか、値を選択できます。

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

          • 自動丸め: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。

        • 数量: 軸ラベルの数。

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

      • 軸単位: 右側の軸の単位。 アイコンをクリックする开关图标と、軸単位を表示または非表示にできます。

      • 軸線: 右軸の軸スタイル。 アイコンをクリックして开关图标軸を表示できます。

        色: 軸の色。

      • グリッド線: 右側の軸線のネットワーク線スタイル。 アイコンをクリックすると开关图标、グリッド線を表示または非表示にできます。

        色: ネットワークケーブルの色。

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

      • テキストスタイル

        • フォントサイズ: 凡例テキストのサイズ。

        • フォントの色: 凡例のテキストの色。

        • フォントの太さ: 凡例テキストのフォントの太さ。

      • レイアウト

        • マージン

          • 水平間隔: 隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。

          • 垂直間隔: 凡例とウィジェットおよび縦棒グラフの上下の境界との間の距離。

        • 位置: ウィジェットの開始座標に対する凡例の位置。 [左上] 、[上中央] 、[上右] 、[下左] 、[下中央] 、または [下右] を選択できます。

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

      • トリガーアイテムの種類: トリガーするターゲットの種類を示します。 このフィールドはオプションで、[データ項目] と [軸] を含みます。

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

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

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

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

        • カスタムボックスサイズ: ダイアログボックスの幅と高さ (px単位) 。 アイコンをクリックし开关图标て、カスタム背景フレームサイズの表示を制御できます。

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

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

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

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

        • 枠の幅: ダイアログボックスの枠の太さ。 単位: ピクセル。

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

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

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

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

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

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

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

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

    • シリーズ: 右側の加号图标または垃圾桶图标アイコンをクリックして、データシリーズを追加または削除します。 横排列图标または竖排列图标アイコンをクリックして、複数のデータ系列の配置スタイルを設定します。 アイコンをクリックし复制图标て、選択したデータ系列設定をコピーし、同じ設定のデータ系列を追加します。 image..png

      • Series("s"): データ系列値。[データ] パネルのsフィールド値に対応します。

      • 列: このシリーズの列のスタイル。 アイコンをクリックすると开关图标、列の表示を制御できます。

        • シリーズ名: データシリーズの名前。カスタマイズ可能です。 data sフィールドを直接表示できる場合は、空として定義します。

        • 色: 列の色。 カラーフィルとグラデーションフィルがサポートされています。

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

          • フォントサイズ: 列タグテキストのサイズ。

          • 色: 列タグテキストの色。

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

          • 位置: タグの位置。 有効な値: Top、Middle、Bottom。

      • Line: このシリーズのポリラインのスタイル。 アイコンをクリックすると开关图标、ポリラインの表示を制御できます。

        重要

        ポリラインは、系列のzフィールドにデータがある場合にのみ表示されます。

        • シリーズ名: データシリーズの名前。カスタマイズ可能です。 data sフィールドを直接表示できる場合は、空として定義します。

        • 色: ポリラインの色。 色は支えられます。

        • スタイル: ポリラインのラインタイプ。 SolidまたはDashedを選択できます。

        • 幅: ポリラインの線の太さ。

        • カーブ: このスイッチをオンにすると、ポリラインがカーブとして表示されます。

        • Point: ポリライン上のドットのスタイル。 アイコンをクリックすると开关图标、ドットの表示を制御できます。

          半径: ポリライン上のドットの半径。 単位: ピクセル。

        • ラベル: ポリラインのラベルスタイル。

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

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

          • フォントの太さ: 行ラベルのフォントの太さ。

    • アニメーション: 縦棒グラフのアニメーション効果のスタイル。 アイコンをクリックすると开关图标、アニメーション効果をオンまたはオフにできます。 image..png

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

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

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

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

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

    データパネル image..png

    設定フィールドの説明

    パラメーター

    説明

    x

    コンポーネントのカテゴリ、つまりx軸の値。

    y

    各バーの値、つまりy軸の値。

    z

    ポリライン上の各点の値、つまりz軸の値。

    s

    オプションです。 対応するシリーズの値。

    表1. パラメーター

    パラメーター

    説明

    制御モード

    スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。 データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。 スイッチをオフにすると、データ要求が自動的にトリガーされます。 デフォルトでは、スイッチはオフになっています。

    自動データ要求

    [自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。 このチェックボックスをオンにしないと、データは自動的に要求されません。 手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。

    データソース

    キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。 コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。 詳細については、「資産データの設定」をご参照ください。

    データフィルター

    [データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。 詳細については、「データフィルターの使用」をご参照ください。

    データ応答結果

    データ要求に対する応答。 データソースが変更された場合は、[データ応答結果] の横にあるRefresh icon アイコンをクリックして、データ応答をリアルタイムで表示できます。

    相互作用パネル image..png

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

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

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

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

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

      • イベント

        イベント

        説明

        データインタフェース要求の完了時

        イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理された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"
      }
    }

    よくある質問

    行または列を折れ線グラフに追加するにはどうすればよいですか?

    1. コンポーネントの [シリーズ] 設定項目に複数のシリーズを追加します。

    2. データ設定を変更し、sフィールドを追加します。

      重要

      sフィールドの値は、Series("s") と一致している必要があります。

      s字段值=系列值