Vega-lite:如何自定义图例标签?

NewToJS

我有这个用Vega-lite制作的条形图(代码和图片如下)。

但我想自定义图例标签,以便而不是videoGame它是Video Game而不是tv它的TV有没有办法做到这一点?

在此处输入图片说明

lineChart = vegalite ({
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 560,
   "height": 200,
   "data": {"values": chartData},
   "mark": {"type": "bar"},
   "encoding": {
     "x": {"field": "year_reference", "type": "temporal", "axis": {"title": "Year", "grid": true}},
     "y": {"field": "reference_count_total", "type": "quantitative", "axis": {"title": "References", "grid": true}},
   "color": {
     "field": "title_type", 
     "scale": {
       "domain": [
         "tv",
         "movie",
         "video",
         "videoGame"
       ],
       "range": [
         "#9e9ac8",
         "#74c476",
         "#a6761d",
         "#6baed6"
       ]
     },
     "legend": true,
     "title": "Reference Type"
    },
 }

})

瓦哈卜

只需labelExpr在图例中提供,您就可以根据字段数据有条件地提供标签。请参考以下代码或编辑器中的图表

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 560,
  "height": 200,
  "data": {
    "values": [
      {
        "title_type": "tv",
        "year_reference": "10-12-2012",
        "reference_count_total": 10
      },
      {
        "title_type": "movie",
        "year_reference": "10-12-2012",
        "reference_count_total": 10
      },
      {
        "title_type": "video",
        "year_reference": "10-12-2012",
        "reference_count_total": 10
      },
      {
        "title_type": "videoGame",
        "year_reference": "10-12-2012",
        "reference_count_total": 10
      }
    ]
  },
  "mark": {"type": "bar"},
  "encoding": {
    "x": {
      "field": "year_reference",
      "type": "temporal",
      "axis": {"title": "Year", "grid": true}
    },
    "y": {
      "field": "reference_count_total",
      "type": "quantitative",
      "axis": {"title": "References", "grid": true}
    },
    "color": {
      "field": "title_type",
      "scale": {
        "domain": ["tv", "movie", "video", "videoGame"],
        "range": ["#9e9ac8", "#74c476", "#a6761d", "#6baed6"]
      },
      "legend": {
        "labelExpr": "datum.label == 'tv' ? 'Tv' : datum.label == 'movie' ? 'Movie' :datum.label == 'video' ? 'Video' : 'Video Game'"
      },
      "title": "Reference Type"
    }
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章