代码之家 › 专栏 › 技术社区 › Pat

使用Deneb在条形图上显示strokeWidth

deneb powerbi-desktop visualization powerbi charts

Pat · 技术社区 · 1 年前

我有一个使用Deneb创建的简单条形图。当使用粗strokeWidth时,条形的排序顺序似乎会影响笔划的显示方式(在周围条形的顶部或后面)。有没有一种方法可以显示整个中风过程?下面是我的代码和结果。[这是我实际工作的精简版本,所以请不要建议使用其他视觉类型;我需要使用像Deneb这样的东西来实现我所包含的不属于这个例子的功能。]

{
  "data": {
    "values": [
      {"Yr": 2025, "BarName": "P101", "BarHt": 0.5, "stWidth": 5},
      {"Yr": 2025, "BarName": "P102", "BarHt": 0.6, "stWidth": 1},
      {"Yr": 2025, "BarName": "P103", "BarHt": 0.7, "stWidth": 5},
      {"Yr": 2026, "BarName": "P104", "BarHt": 0.8, "stWidth": 1},
      {"Yr": 2026, "BarName": "P105", "BarHt": 0.9, "stWidth": 5},
      {"Yr": 2026, "BarName": "P106", "BarHt": 0.8, "stWidth": 1}
    ]
  },
  "transform": [
    {
      "stack": "BarHt",
      "groupby": ["Yr"],
      "as": ["ymin", "ymax"]
    },
    {
      "calculate": "(datum.ymin + datum.ymax) / 2",
      "as": "ymid"
    }
  ],
  "encoding": {
    "x": {"field": "Yr"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": {"expr": "datum['stWidth']"}
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "BarName"},
        "y": {"field": "ymid", "type": "quantitative"}
      }
    }
  ]
}

1 回复 | 直到 1 年前

davidebacci 1 年前

在单独的标记上画你的笔划。例如。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 300,
  "data": {
    "values": [
      {"Yr": 2025, "BarName": "P101", "BarHt": 0.5, "stWidth": 5},
      {"Yr": 2025, "BarName": "P102", "BarHt": 0.6, "stWidth": 1},
      {"Yr": 2025, "BarName": "P103", "BarHt": 0.7, "stWidth": 5},
      {"Yr": 2026, "BarName": "P104", "BarHt": 0.8, "stWidth": 1},
      {"Yr": 2026, "BarName": "P105", "BarHt": 0.9, "stWidth": 5},
      {"Yr": 2026, "BarName": "P106", "BarHt": 0.8, "stWidth": 1}
    ]
  },
  "transform": [
    {"stack": "BarHt", "groupby": ["Yr"], "as": ["ymin", "ymax"]},
    {"calculate": "(datum.ymin + datum.ymax) / 2", "as": "ymid"}
  ],
  "encoding": {"x": {"field": "Yr"}},
  "layer": [
    {
      "mark": {
        "type": "bar"
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {
        "type": "bar", "fill":"transparent",
        "stroke": "black",
        "strokeWidth": {"expr": "datum['stWidth']"}
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "BarName"},
        "y": {"field": "ymid", "type": "quantitative"}
      }
    }
  ]
}