Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/405.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Vega lite:如何自定义图例标签?_Javascript_Data Visualization_Vega Lite - Fatal编程技术网

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

Javascript Vega lite:如何自定义图例标签?,javascript,data-visualization,vega-lite,Javascript,Data Visualization,Vega Lite,我有这个条形图是用(下面的代码和图片)制作的 但是我想定制图例标签,这样它就不是视频游戏了,而是视频游戏了,而不是电视了。有什么办法可以这样做吗 })只需在图例中提供标签expr,您可以根据字段数据有条件地提供标签。 请参阅以下代码或中的图表 lineChart = vegalite ({ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "width"

我有这个条形图是用(下面的代码和图片)制作的

但是我想定制图例标签,这样它就不是视频游戏了,而是视频游戏了,而不是电视了。有什么办法可以这样做吗


})

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

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"
    },
 }
{
  "$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"
    }
  }
}