charts - VEGA 图表个别条形颜色

Question

我想在图表中制作每个条形 - 用不同的颜色。请帮忙。

所以默认图表如文档中所述： https ://vega.github.io/vega/examples/bar-chart/

例如 - 我想做：蓝色，红色，黄色，绿色，蓝色，蓝色。

请帮忙！谢谢！

Answer 1

对于条形图

{
  "$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": "yellow",
        "b": 28
      },
      {
        "color": "green",
        "b": 55
      },
      {
        "color": "blue",
        "b": 43
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "color",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    },
    "color": {
      "field": "color",
      "type": "nominal",
      "scale": null
    }
  }
}

对于饼图

 {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "signals": [
{
  "name": "startAngle", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
  "name": "endAngle", "value": 6.29,
  "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
  "name": "padAngle", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 0.1}
},
{
  "name": "innerRadius", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 90, "step": 1}
},
{
  "name": "cornerRadius", "value": 0,
  "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
},
{
  "name": "sort", "value": false,
  "bind": {"input": "checkbox"}
}
  ],

  "data": [
{
  "name": "table",
  "values": [
    {"field": 10,"color": "blue"},
    {"field": 3,"color": "green"},
    {"field": 7,"color": "red"},
    {"field": 8,"color":"orange"},
    {"field": 15,"color":"yellow"}
  ],
  "transform": [
    {
      "type": "pie",
      "field": "field",
      "startAngle": {"signal": "startAngle"},
      "endAngle": {"signal": "endAngle"},
      "sort": {"signal": "sort"}
    }
  ]
}
  ],

  "scales": [
{
  "name": "color",
  "type": "ordinal",
  "domain": {"data": "table", "field": "color"},
  "range": {"scheme": "category20"}
}
  ],

  "marks": [
{
  "type": "arc",
  "from": {"data": "table"},
  "encode": {
    "enter": {
      "fill": { "field": "color",
              "type": "nominal",
            "scale": null},
      "x": {"signal": "width / 2"},
      "y": {"signal": "height / 2"}
    },
    "update": {
      "startAngle": {"field": "startAngle"},
      "endAngle": {"field": "endAngle"},
      "padAngle": {"signal": "padAngle"},
      "innerRadius": {"signal": "innerRadius"},
      "outerRadius": {"signal": "width / 2"},
      "cornerRadius": {"signal": "cornerRadius"}
    }
  }
}
  ]
}

   

Answer 2

我遇到了同样的问题，在https://vega.github.io/vega-lite/examples/bar_color_disabled_scale.html的一点帮助下，我得到了以下信息 - 想法是对数据中的颜色进行编码：

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "c": "black"},
      {"a": "B", "b": 55, "c": "black"},
      {"a": "C", "b": 43, "c": "black"},
      {"a": "D", "b": 91, "c": "red"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal", "scale": null}
  }
}

或者，如果您需要，这也可以使用并保留图例：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": 91}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal", "sort": ["C", "A", "B", "D"]},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "a", "type": "nominal", "sort": ["C", "A", "B", "D"], "scale": {"range": ["red", "black", "black", "black", "black"]}}
  }
}

Answer 3

使用您链接到的 Vega 条形图示例：

首先，创建一个比例来定义颜色：

{
  "name": "colors",
  "type": "ordinal",
  "domain": {"data": "table", "field": "category"},
  "range": {"scheme": "category10"}
}

“方案”的值可以是Vega 的内置方案，也可以是自定义方案。

然后，您需要在标记的update属性集上指定填充的颜色，指定方案的名称：

"update": {
    "fill": {"scale": "colors", "field": "category"}
},

Answer 4

您可以定义分类色标并使用它来更改条形标记的颜色。查看其他一些使用分类色标的示例。