如何在 vega lite 饼图中使用字段值作为颜色值?

问题描述 投票:0回答:1

我遇到了这个饼图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"}
    }
  }]
}

渲染如下:

我的数据包含

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 channel
"field": "color"

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

但是,没有用。它仍然呈现与上面相同的效果。如何使用字段值中指定的颜色值作为实际颜色?

PS:链接到上面的可视化

d3.js visualization vega-lite vega vega-lite-api
1个回答
2
投票

文档

要直接对数据值进行编码,可以将

scale
属性设置为
null

所以您需要将

scale
设置为
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"}}
    }
  ]
}

输出:

© www.soinside.com 2019 - 2024. All rights reserved.