Vega-lite 根据数据设置颜色，同时保留图例

Question

我正在尝试使用数据中的值来设置条形的颜色。我也希望这能体现在传说中。

所以我想出了如何根据数据中的值为条形图使用特定颜色：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {
        "color": "rgb(0, 0, 0)",
        "b": 28,
        "type": "outside"
      },
      {
        "color": "rgb(255, 0, 0)",
        "b": 55,
        "type": "inside"
      },
      {
        "color": "rgb(0, 255, 0)",
        "b": 43,
        "type": "dew"
      }
    ]
  },  
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "type",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    },
    "color": { "field": "color", "type": "nominal", "legend": {}, "scale": null}
  }
}

颜色正确的条：

以上仅适用于 "scale": null 阻止显示图例。如果我删除它，那么图例就会显示，但自定义颜色会丢失，我会在图例中看到 rbg 值：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {
        "color": "rgb(0, 0, 0)",
        "b": 28,
        "type": "outside"
      },
      {
        "color": "rgb(255, 0, 0)",
        "b": 55,
        "type": "inside"
      },
      {
        "color": "rgb(0, 255, 0)",
        "b": 43,
        "type": "dew"
      }
    ]
  },  
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "type",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    },
    "color": { "field": "color", "type": "nominal", "legend": {}}
  }
}

颜色丢失，图例标签错误：

我显然可以通过以下方式获得正确的图例标签：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {
        "color": "rgb(0, 0, 0)",
        "b": 28,
        "type": "outside"
      },
      {
        "color": "rgb(255, 0, 0)",
        "b": 55,
        "type": "inside"
      },
      {
        "color": "rgb(0, 255, 0)",
        "b": 43,
        "type": "dew"
      }
    ]
  },  
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "type",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    },
    "color": { "field": "type", "type": "nominal", "legend": {}}
  }
}

但我还是没有得到我想要的颜色:

是否可以同时拥有自定义颜色和图例？

Answer 1

让自定义颜色出现在图例中的方法是使用具有自定义 scheme 的比例尺。例如，您可以这样创建您想要的图表：

(view in vega editor)

{
  "data": {
    "values": [
      {"b": 28, "type": "outside"},
      {"b": 55, "type": "inside"},
      {"b": 43, "type": "dew"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "type", "type": "nominal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {
      "field": "type",
      "type": "nominal",
      "scale": {
        "domain": ["outside", "inside", "dew"],
        "range": ["rgb(0, 0, 0)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"]
      }
    }
  }
}

我不知道有什么方法可以从数据中绘制此配色方案定义，或者在将比例设置为 null 时强制绘制图例，但您可以通过绘制传奇自己。它可能看起来像这样：

(view in vega editor)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {"color": "rgb(0, 0, 0)", "b": 28, "type": "outside"},
      {"color": "rgb(255, 0, 0)", "b": 55, "type": "inside"},
      {"color": "rgb(0, 255, 0)", "b": 43, "type": "dew"}
    ]
  },
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "type", "type": "nominal"},
        "y": {"field": "b", "type": "quantitative"},
        "color": {
          "field": "color",
          "type": "nominal",
          "legend": {},
          "scale": null
        }
      }
    },
    {
      "title": "type",
      "mark": {"type": "point", "size": 80, "shape": "square", "filled": true},
      "encoding": {
        "y": {
          "field": "type",
          "type": "nominal",
          "axis": {"orient": "right", "title": null}
        },
        "color": {"field": "color", "type": "nominal", "scale": null}
      }
    }
  ]
}

Vega-lite 根据数据设置颜色，同时保留图例

Vega-lite set color from data whilst retaining a legend

vega

vega-lite