0

我正在尝试访问轴标签内的所有数据,以允许我根据数据值中显示的不同字段更改显示的文本。基准信号只能访问值/标签。

在数据值中,我有一个名为“hasTooltip”的字段,根据此标志,我想更改 Y 轴上显示的标签。

我正在使用具有视图功能的 VEGA 版本 5.20.0。

我想访问所有数据值的图像,而不仅仅是标签

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "padding": 25,
  "autosize": "fit-x",
  "signals": [
    {
      "name": "height",
      "init": "containerSize()[1]",
      "on": [
        {
          "events": "window:resize",
          "update": "containerSize()[1]"
        }
      ]
    },
    {
      "name": "width",
      "init": "containerSize()[0]",
      "on": [
        {
          "events": "window:resize",
          "update": "containerSize()[0]"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {
          "category": "Transferências correntes",
          "position": 2020,
          "hasTooltip": true,
          "value": 1100000
        },
        {
          "category": "Transferências correntes",
          "position": 2021,
          "value": 600000
        },
        {
          "category": "Despesas com o pessoal",
          "position": 2020,
          "value": 70000
        },
        {
          "category": "Despesas com o pessoal",
          "position": 2021,
          "value": 55555
        },
        {
          "category": "Aquisição de bens e serviços correntes",
          "position": 2020,
          "value": 5555
        },
        {
          "category": "Aquisição de bens e serviços correntes",
          "position": 2021,
          "value": 22222
        },
        {
          "category": "Outras despesas correntes",
          "position": 2020,
          "value": 2150
        },
        {
          "category": "Outras despesas correntes",
          "position": 2021,
          "value": 200
        },
        {
          "category": "Outras despesas scorrentes",
          "position": 2020,
          "value": 2150
        },
        {
          "category": "Outras despesas scorrentes",
          "position": 2021,
          "value": 200
        },
        {
          "category": "Transferências para investimentos",
          "position": 2020,
          "value": 25789
        },
        {
          "category": "Transferências para investimentos",
          "position": 2021,
          "value": 22222
        },
        {
          "category": "Transferêncdias para investimentos",
          "position": 2020,
          "value": 25789
        },
        {
          "category": "Transferêncdias para investimentos",
          "position": 2021,
          "value": 22222
        }
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "expressionNumToText(datum.value)",
          "as": "num_text2"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "category"
      },
      "range": "height",
      "padding": 0.25
    },
    {
      "name": "xscale",
      "type": "linear",
      "domain": {
        "data": "table",
        "field": "value"
      },
      "range": [
        0,
        {
          "signal": "width"
        }
      ],
      "round": true,
      "zero": true,
      "nice": true,
      "padding": 0.0001
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "data": "table",
        "field": "position"
      },
      "range": {
        "scheme": "municipal"
      }
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 205,
      "zindex": 1,
      "labelFontSize": 12,
      "labelFont": {
        "value": "Manrope-Regular"
      },
      "minExtent": 205,
      "labelAlign": "left",
      "labelBound": true,
      "labelFlush": 1,
      "labelFlushOffset": 1,
      "bandPosition": 1,
      "encode": {
        "labels": {
          "interactive": true,
          "update": {
            "text": {"signal": "ola(datum)"},
            "tooltip": {"signal": "datum.value"}
          }
        }
      }
    },
    {
      "orient": "top",
      "grid": true,
      "gridDash": {
        "value": [
          5
        ]
      },
      "tickCount": 4,
      "scale": "xscale",
      "labelFontSize": 12,
      "tickSize": 0,
      "labelFont": {
        "value": "Manrope-Regular"
      },
      "labelPadding": 10,
      "domain": false,
      "formatType": "number"
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "category"
        }
      },
      "encode": {
        "enter": {
          "y": {
            "scale": "yscale",
            "field": "category"
          }
        }
      },
      "signals": [
        {
          "name": "heightGroup",
          "init": "heightBarGroup()"
        }
      ],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": [
          0,
          {
            "signal": "heightGroup"
          }
      ],
          "domain": {
            "data": "facet",
            "field": "position"
          }
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {
            "data": "facet"
          },
          "type": "rect",
          "encode": {
            "enter": {
              "y": {
                "scale": "pos",
                "field": "position"
              },
              "height": {
                "scale": "pos",
                "band": 1
              },
              "x": {
                "scale": "xscale",
                "field": "value"
              },
              "x2": {
                "scale": "xscale",
                "value": 0
              },
              "fill": {
                "scale": "color",
                "field": "position"
              }
            }
          }
        },
        {
          "type": "text",
          "from": {
            "data": "bars"
          },
          "encode": {
            "enter": {
              "x": {
                "field": "x2",
                "offset": 10
              },
              "y": {
                "field": "y",
                "offset": {
                  "field": "height",
                  "mult": 0.5
                }
              },
              "fill": [
                {
                  "value": "#0C1932"
                }
              ],
              "fontSize": {
                "value": 14
              },
              "font": {
                "value": "Manrope-Extra-Bold"
              },
              "align": {
                "value": "left"
              },
              "baseline": {
                "value": "middle"
              },
              "text": {
                "field": "datum.num_text2"
              }
            }
          }
        }
      ]
    }
  ],
  "legends": [
    {
      "fill": "color",
      "orient": "none",
      "legendX": -200,
      "legendY": -90,
      "direction": "horizontal",
      "offset": -50,
      "labelOffset": 10,
      "labelFont": {
        "value": "Manrope-Regular"
      },
      "symbolSize": 400,
      "encode": {
        "title": {
          "update": {
            "fontSize": {
              "value": 14
            }
          }
        },
        "labels": {
          "interactive": true,
          "update": {
            "fontSize": {
              "value": 12
            },
            "fill": {
              "value": "black"
            }
          },
          "hover": {
            "fill": {
              "value": "firebrick"
            }
          }
        },
        "symbols": {
          "update": {
            "stroke": {
              "value": "transparent"
            }
          }
        },
        "legend": {
          "update": {
          }
        }
      }
    }
  ],
  "config": {
    "locale": {
      "number": {
        "decimal": ",",
        "thousands": " ",
        "grouping": [
          3
        ],
        "currency": [
          "",
          " €"
        ]
      }
    }
  }
}
4

0 回答 0