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}
      }
    }
  ]
}