如何将现场值用作Vega Lite饼图中的颜色值？

发布于 2025-02-10 09:15:33 字数 2796 浏览 1 评论 0原文

I came across 此饼图 vega Lite可视化：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4},
      {"category": "b", "value": 6},
      {"category": "c", "value": 10},
      {"category": "d", "value": 3},
      {"category": "e", "value": 7},
      {"category": "f", "value": 8}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }]
}

它的呈现如下：

我的数据包含code> color键：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
      {"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
      {"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
      {"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
      {"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
      {"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "color", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }]
}

我想使用<<<<<代码> rgb（）在此color键的颜色值中指定的颜色值。我尝试在颜色频道中指定此字段：“ field”：“ color”。

"color": {"field": "color", "type": "nominal", "legend": null}

但是，没有用。它仍然与上述相同。如何使用字段值中指定为实际颜色的颜色值？

PS:

原文

I came across this pie chart vega lite visualization:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4},
      {"category": "b", "value": 6},
      {"category": "c", "value": 10},
      {"category": "d", "value": 3},
      {"category": "e", "value": 7},
      {"category": "f", "value": 8}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }]
}

It renders as follows:

My data contains color key:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
      {"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
      {"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
      {"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
      {"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
      {"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "color", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }]
}

I want to use the rgb() color value specified in this color key's value to color individual pie. I tried specifying this field in color channel: "field": "color".

"color": {"field": "color", "type": "nominal", "legend": null}

However, no use. It still renders the same as above. How can use color value specified in field's value as actual color?

PS: Link to above visualization.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

策马西风 2025-02-17 09:15:33

文档说：

要直接编码数据值，比例属性可以设置为null。

因此，您需要将比例设置为null。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
      {"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
      {"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
      {"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
      {"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
      {"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "color", "type": "nominal", "legend": null, "scale":null}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 80}},
    {
      "mark": {"type": "text", "radius": 90},
      "encoding": {"text": {"field": "category", "type": "nominal"}}
    }
  ]
}

输出：

The documentation says:

To directly encode the data value, the scale property can be set to null.

So you need to set the scale to null.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
      {"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
      {"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
      {"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
      {"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
      {"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "color", "type": "nominal", "legend": null, "scale":null}
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 80}},
    {
      "mark": {"type": "text", "radius": 90},
      "encoding": {"text": {"field": "category", "type": "nominal"}}
    }
  ]
}

This outputs: