在Vega-Lite中的重复图层上定义颜色

时间:2020-07-19 10:53:18

标签: vega-lite

我对Vega-Lite图表有这个定义

  {
   "$schema":"https://vega.github.io/schema/vega-lite/v4.json",
   "data":{
      "values":[
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444444",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45466
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444445",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45433
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444446",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45400
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444447",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45422
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444448",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45403
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444449",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45422
         }
      ]
   },
   "repeat":{
      "layer":[
         "lowval",
         "highval",
         "resultdecimal"
      ]
   },
   "spec":{
      "mark":{
         "type":"line",
         "strokeWidth":3,
         "point":{
            "size":45,
            "filled":true
         }
      },
      "encoding":{
         "x":{
            "field":"serialnumber",
            "type":"ordinal",
            "axis":{
               "labelAngle":-70,
               "title":"Selected Tests",
               "titleFontSize":10
            }
         },
         "y":{
            "field":{
               "repeat":"layer"
            },
            "type":"quantitative",
            "axis":{
               "title":"Teststeps in selected Tests",
               "titleFontSize":10
            },
            "scale":{
               "domain":[
                  45000,
                  45500
               ]
            }
         },
         "tooltip":[
            {
               "field":"serialnumber",
               "type":"ordinal"
            },
            {
               "field":"resultdecimal",
               "type":"quantitative"
            }
         ],
         "color":{
            "datum":{
               "repeat":"layer"
            },
            "type":"nominal"
         }
      }
   },
   "config":{
      "font":"Roboto",
      "axisX":{
         "labelFontSize":9
      },
      "axisY":{
         "labelFontSize":9
      }
   }
}

结果是这样的: enter image description here

我要实现的是根据字段名称定义线条的颜色

if( highval) 
color = red
if( lowval) 
color = red
if (resultdecimal)
color = blue

所以min-max为红色,结果为蓝色。

如果还有另一种显示三种不同图表线并正确定义值的方法,欢迎提出任何想法!

1 个答案:

答案 0 :(得分:0)

我认为我找到了答案:

这里是条件颜色的vega-lite定义

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444444",
      "lowval":45000,
      "highval":45500,
      "resultdecimal":45466
   
},
   {
       "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444445",
    "lowval":45000,
      "highval":45500,
      "resultdecimal":45433
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444446",
         "lowval":45000,
      "highval":45500,
      "resultdecimal":45400
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444447",
    "lowval":45000,
      "highval":45500,
      "resultdecimal":45422
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444448",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45403
   
},
   {
        "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444449",
     "lowval":45000,
      "highval":45500,
      "resultdecimal":45422
}
]
  },
  "repeat": {
    "layer": ["lowval", "highval","resultdecimal"]
  },
  "spec": {
                  "mark":{
                  "type":"line",
                  "strokeWidth":3,
                  "point":{
                     "size":45,
                     "filled":true
                  }
               },
    "encoding": {
      "x": {
        "field": "serialnumber",
        "type": "ordinal",
            "axis":{
          "labelAngle":-70,
          "title":"Selected Tests",
          "titleFontSize":10
        }
      },
      "y": {
        "field": {"repeat": "layer"},
        "type": "quantitative",
                      "axis": {
                  "title": "Teststeps in selected Tests",
                  "titleFontSize": 10},
                  "scale":{
                        "domain":[45000,45500]
                     }

      },
        "tooltip":[
          {
            "field":"serialnumber",
            "type":"ordinal"
          },
          {
            "field":"resultdecimal",
            "type":"quantitative"
          }
                  ],
                  
      "color": {
        "datum": {"repeat": "layer"},
        "type": "nominal",
       "scale": {
        "range": ["#e7ba52", "#c7c7c7", "#e7ba52"]
      },
      "legend": {"title": "Weather type"}
      }
    }
  },
                      "config": {
                        "font": "Roboto",
                        "axisX": {
                            "labelFontSize": 9
                        },
                        "axisY": {
                            "labelFontSize": 9
                        }
                    }
}