Vega&Power BI Deneb雷达图定制修改技术求助

核心修改点及代码调整 #

1. 将1号类别置于12点钟位置 + 2. 类别按1-12顺时针排列 #

在Vega的角度刻度配置中，直接指定起始角度与排序规则：

"scales": [
  {
    "name": "angle",
    "type": "point",
    "domain": {
      "data": "categories", 
      "field": "name", 
      "sort": {"op": "number", "order": "ascending"} // 强制按数字升序排列类别
    },
    "range": {"start": -90, "stop": 270}, // 从-90°（对应12点钟）开始，顺时针覆盖360°
    "padding": 0
  }
]

如果是使用projection方式定义极坐标，调整角度计算表达式：

"projection": {
  "type": "polar",
  "angle": {"expr": "-90 + (datum.index * 30)"}, // 每个类别间隔30°，起始点12点钟
  "radius": {"expr": "scale('radius', datum.value)"}
}

3. 径向网格线设置为虚线样式 #

找到径向网格线的mark配置，添加strokeDash属性定义虚线规则：

"marks": [
  {
    "type": "line",
    "name": "radial-grid",
    "from": {"data": "grid"},
    "encode": {
      "enter": {
        "x": {"field": "x"},
        "y": {"field": "y"},
        "stroke": {"value": "#ccc"},
        "strokeDash": {"value": [4, 2]}, // 线段长度4px，间隔2px的虚线
        "strokeWidth": {"value": 1}
      }
    }
  }
]

4. 数据点旁数值显示（已实现，补充优化建议） #

若需优化数值位置避免遮挡，可调整文本偏移：

{
  "type": "text",
  "from": {"data": "values"},
  "encode": {
    "enter": {
      "x": {"scale": "angle", "field": "category"},
      "y": {"scale": "radius", "field": "value"},
      "text": {"field": "value", "format": ".1f"}, // 自定义数值精度
      "dx": {"expr": "scale('angle', datum.category) > 180 ? -10 : 10"}, // 左右偏移适配类别位置
      "dy": {"expr": "scale('angle', datum.category) === 90 ? -8 : (scale('angle', datum.category) === 270 ? 8 : 0)"}, // 上下偏移
      "fill": {"value": "#333"},
      "fontSize": {"value": 10}
    }
  }
}

整合后的关键配置片段 #

{
  "width": 400,
  "height": 400,
  "data": [
    {"name": "categories", "values": [{"name": "1"}, {"name": "2"}, ..., {"name": "12"}]},
    {"name": "values", "values": [{"category": "1", "value": 80}, ...]}
  ],
  "scales": [
    {
      "name": "angle",
      "type": "point",
      "domain": {"data": "categories", "field": "name", "sort": {"op": "number", "order": "ascending"}},
      "range": {"start": -90, "stop": 270},
      "padding": 0
    },
    {
      "name": "radius",
      "type": "linear",
      "domain": {"data": "values", "field": "value"},
      "range": [0, 180],
      "zero": true
    }
  ],
  "marks": [
    {
      "type": "line",
      "name": "radial-grid",
      "from": {"data": "grid"},
      "encode": {
        "enter": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "stroke": {"value": "#e0e0e0"},
          "strokeDash": {"value": [3, 3]},
          "strokeWidth": {"value": 1}
        }
      }
    },
    // 类别标签
    {
      "type": "text",
      "from": {"data": "categories"},
      "encode": {
        "enter": {
          "x": {"scale": "angle", "field": "name", "offset": 20},
          "y": {"scale": "angle", "field": "name", "offset": 20},
          "text": {"field": "name"},
          "fill": {"value": "#333"},
          "fontSize": {"value": 12}
        }
      }
    },
    // 数据点与数值
    {
      "type": "symbol",
      "from": {"data": "values"},
      "encode": {
        "enter": {
          "x": {"scale": "angle", "field": "category"},
          "y": {"scale": "radius", "field": "value"},
          "fill": {"value": "#2196F3"},
          "size": {"value": 100}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "values"},
      "encode": {
        "enter": {
          "x": {"scale": "angle", "field": "category"},
          "y": {"scale": "radius", "field": "value"},
          "text": {"field": "value", "format": ".0f"},
          "dx": {"expr": "scale('angle', datum.category) > 180 ? -8 : 8"},
          "fill": {"value": "#000"},
          "fontSize": {"value": 10}
        }
      }
    }
  ]
}

若你的Power BI Vega配置有数据源绑定特殊逻辑，可贴出当前完整配置代码，进一步针对性调整。

内容的提问来源于stack exchange，提问作者steven