如何在 vega-lite 中更改饼图文本标签的颜色答案

【问题标题】：How to change the color of the text lables of a pie chart in vega-lite如何在 vega-lite 中更改饼图文本标签的颜色
【发布时间】：2021-09-23 09:52:33
【问题描述】：

我有这个代表某个数据集的小图表。正如您在代码 sn-p 中看到的，文本标签当前显示为与饼图组件本身相同的颜色，因此在位于饼图中时是不可见的（如果您更改，您可以看到这一点

mark: {type: "text", radius: 70},

到

mark: {type: "text", radius: 120},

因为文本标签将位于饼图弧的区域之外。因为我希望文本标签出现在弧内，所以我希望它们是黑色或白色的。有谁碰巧知道我如何实现这一目标？

vegaEmbed("#graph", {
  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
  data: {
    values: [{
        event: "a",
        occurances: 28,
      },
      {
        event: "b",
        occurances: 3,
      },
      {
        event: "c",
        occurances: 1,
      },
      {
        event: "d",
        occurances: 3,
      },
      {
        event: "e",
        occurances: 1,
      },
      {
        event: "f",
        occurances: 10,
      },
      {
        event: "g",
        occurances: 2,
      },
      {
        event: "h",
        occurances: 1,
      },
      {
        event: "k",
        occurances: 1,
      },
    ],
  },
  layer: [{
      mark: {
        type: "arc",
        innerRadius: 50,
        outerRadius: 100
      },
    },
    {
      mark: {
        type: "text",
        radius: 70
      },
      encoding: {
        text: {
          field: "occurances",
          type: "quantitive"
        },
      },
    },
  ],
  mark: {
    type: "arc",
    innerRadius: 50,
    outerRadius: 100
  },
  encoding: {
    color: {
      field: "event",
      type: "nominal",
    },
    theta: {
      field: "occurances",
      type: "quantitative",
      stack: true,
    },
  },
});

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<div id="graph"></div>

【问题讨论】：

标签： javascript html vega-lite vega

【解决方案1】：

将整个编码带到外面以保持两个层的通用性，并在标记text 中提供fill 以应用一些颜色。

参考以下代码或editor链接：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"event": "a", "occurances": 28},
      {"event": "b", "occurances": 3},
      {"event": "c", "occurances": 1},
      {"event": "d", "occurances": 3},
      {"event": "e", "occurances": 1},
      {"event": "f", "occurances": 10},
      {"event": "g", "occurances": 2},
      {"event": "h", "occurances": 1},
      {"event": "k", "occurances": 1}
    ]
  },
  "encoding": {
    "color": {"field": "event", "type": "nominal"},
    "theta": {"field": "occurances", "type": "quantitative", "stack": true}
  },
  "layer": [
    {"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 100}},
    {
      "mark": {"type": "text", "radius": 70, "fill": "black"},
      "encoding": {"text": {"field": "occurances", "type": "quantitative"}}
    }
  ]
}

【讨论】：