根据Vega条形图中的图形值显示多种颜色

问题描述

如何基于图形值显示颜色范围较浅的单个条。我知道，vega具有顺序的多色方案。 Click here to check Image for MultiColor Scheme。我想将此颜色方案用于图形中的不同值。例如，如果我有value = 3，则在图形中，与value = 10相比，它应显示更浅的颜色。我如何将多色方案包含在条形图中，以便它根据值显示颜色。以下是我尝试过的代码段，实际上是根据颜色而不是类别来查找颜色变化。我在标度中包含颜色，在标记中包含填充颜色。有人可以指导我如何实现这一目标。我是新来的

{
  "$schema": "https://vega.github.io/schema/vega/v5.json","description": "A basic bar chart example,with value labels shown upon mouse hover.","width": 400,"height": 200,"padding": 5,"data": [
    {
      "name": "table","values": [
        {"category": "A","amount": 28},{"category": "B","amount": 55},{"category": "C","amount": 43},{"category": "D","amount": 91},{"category": "E","amount": 81},{"category": "F","amount": 53},{"category": "G","amount": 19},{"category": "H","amount": 87}
      ]
    }
  ],"signals": [
    {
      "name": "tooltip","value": {},"on": [
        {"events": "rect:mouSEOver","update": "datum"},{"events": "rect:mouSEOut","update": "{}"}
      ]
    }
  ],"scales": [
    {
      "name": "xscale","type": "band","domain": {"data": "table","field": "category"},"range": "width","padding": 0.05,"round": true
    },{
      "name": "yscale","field": "amount"},"nice": true,"range": "height"
    },{
      "name": "color","type": "ordinal","range": {"scheme": "category10"}
    }
  ],"axes": [
    { "orient": "bottom","scale": "xscale" },{ "orient": "left","scale": "yscale" }
  ],"marks": [
    {
      "type": "rect","from": {"data":"table"},"encode": {
        "enter": {
          "x": {"scale": "xscale","width": {"scale": "xscale","band": 1},"y": {"scale": "yscale","y2": {"scale": "yscale","value": 0}
        },"update": {
          "fill": {"value": "steelblue"}
        },"hover": {
          "fill": {"value": "red"}
        }
      }
    },{
      "type": "text","encode": {
        "enter": {
          "align": {"value": "center"},"baseline": {"value": "bottom"},"fill": {"scale": "color","field": "category"}
        },"update": {
          "x": {"scale": "xscale","signal": "tooltip.category","band": 0.5},"signal": "tooltip.amount","offset": -2},"text": {"signal": "tooltip.amount"},"fillOpacity": [
            {"test": "datum === tooltip","value": 0},{"value": 1}
          ]
        }
      }
    }
  ]
}

解决方法

更新：我发现我在mark属性的type ='text'中添加了填充颜色，而不是type ='rect'

“填充”：{“比例”：“颜色”，“字段”：“类别”}。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json","description": "A basic bar chart example,with value labels shown upon mouse hover.","width": 400,"height": 200,"padding": 5,"data": [
    {
      "name": "table","values": [
        {"category": "A","amount": 28},{"category": "B","amount": 55},{"category": "C","amount": 43},{"category": "D","amount": 91},{"category": "E","amount": 81},{"category": "F","amount": 53},{"category": "G","amount": 19},{"category": "H","amount": 87}
      ]
    }
  ],"signals": [
    {
      "name": "tooltip","value": {},"on": [
        {"events": "rect:mouseover","update": "datum"},{"events": "rect:mouseout","update": "{}"}
      ]
    }
  ],"scales": [
    {
      "name": "xscale","type": "band","domain": {"data": "table","field": "category"},"range": "width","padding": 0.05,"round": true
    },{
      "name": "yscale","field": "amount"},"nice": true,"range": "height"
    },{
      "name": "color","type": "ordinal","range": {"scheme": "category10"}
    }
  ],"axes": [
    { "orient": "bottom","scale": "xscale" },{ "orient": "left","scale": "yscale" }
  ],"marks": [
    {
      "type": "rect","from": {"data":"table"},"encode": {
        "enter": {
          "x": {"scale": "xscale","width": {"scale": "xscale","band": 1},"y": {"scale": "yscale","y2": {"scale": "yscale","value": 0}
        },"update": {
         "fill": {"scale": "color","field": "category"}
        },"hover": {
          "fill": {"value": "red"}
        }
      }
    },{
      "type": "text","encode": {
        "enter": {
          "align": {"value": "center"},"baseline": {"value": "bottom"}
          
        },"update": {
          "x": {"scale": "xscale","signal": "tooltip.category","band": 0.5},"signal": "tooltip.amount","offset": -2},"text": {"signal": "tooltip.amount"},"fillOpacity": [
            {"test": "datum === tooltip","value": 0},{"value": 1}
          ]
        }
      }
    }
  ]
}