主页 / coding / 问题 / 78919969
Accepted
Pat
Asked: 2024-08-28 00:43:59 +0800 CST

使用 Deneb 在条形图上显示笔划宽度

  • 772

我有一张使用 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"}
      }
    }
  ]
}

条形图

charts

1 个回答

  1. Best Answer

    在单独的标记中绘制笔画。例如

    在此处输入图片描述

    {
  "$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"}
      }
    }
  ]
}
    • 0

相关问题