我的代码如下;

{
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "width": 800,
      "height": 200,
      "data": {
        "values": [
          {
            "pre_120": 0,
            "pre_90": 0,
            "pre_60": 0,
            "post_60": 100,
            "post_90": 150,
            "post_120": 200,
            "type": "Mango",
            "count": "twenty"
          },
          {
            "pre_120": 0,
            "pre_90": 0,
            "pre_60": 0,
            "post_60": 90,
            "post_90": 140,
            "post_120": 190,
            "type": "Apple",
            "count": "ten"
          }
        ]
      },
      "transform": [
        {"fold": ["pre_120", "pre_90", "pre_60","0", "post_60", "post_90", "post_120"]}
      ],
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {
              "field": "key",
              "sort": [
                "pre_120",
                "pre_90",
                "pre_60",
                "0",
                "post_60",
                "post_90",
                "post_120"
              ]
            },
            "y": {"field": "value", "type": "quantitative"},
            "color": {"field": "type", "type": "nominal"}
          }
        },
  {
    "mark": { 
      "type": "rule", 
      "color": "maroon", 
      "size": 3 ,
      "strokeDash": [6, 4]},
    "encoding": {
      "x": { "datum": "0" }
    }
  }
  ]
  }

下面是织女星编辑器的链接.

https://vega.github.io/editor/#/gist/947b2a99801bc6a08d468cdb9acbeb50/legend.json

My aim is to show the legend to include value of 2 fields i.e. type and count fields with a hyphen. Example :
In the image below, I wanted to show the legends as
'Apple - twenty'
and
'Mango - ten'
How could I do the same? enter image description here

推荐答案

enter image description here

我只需要创建一个新的计算字段并使用它.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {
        "pre_120": 0,
        "pre_90": 0,
        "pre_60": 0,
        "post_60": 100,
        "post_90": 150,
        "post_120": 200,
        "type": "Mango",
        "count": "ten"
      },
      {
        "pre_120": 0,
        "pre_90": 0,
        "pre_60": 0,
        "post_60": 90,
        "post_90": 140,
        "post_120": 190,
        "type": "Apple",
        "count": "twenty"
      }
    ]
  },
  "transform": [
    {"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]},
     {"calculate": "datum.type + ' - ' + datum.count", "as": "label"}
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "key",
          "sort": [
            "pre_120",
            "pre_90",
            "pre_60",
            "post_60",
            "post_90",
            "post_120"
          ]
        },
        "y": {"field": "value", "type": "quantitative"},
        "color": {
          "field": "label",
          "type": "nominal"
        }
      }
    }
  ]
}

Javascript相关问答推荐

我开始使用/url?q=使用Cheerio

docx.js:如何在客户端使用文档修补程序

网页自检测外部元素无法加载

扫描qr code后出错whatter—web.js

Chrome是否忽略WebAuthentication userVerification设置?""

如何在不创建新键的情况下动态更改 map 中的项目?

colored颜色 检测JS,平均图像 colored颜色 检测JS

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

如何使onPaste事件与可拖动的HTML元素一起工作?

在JS中拖放:检测文件

如何迭代叔父元素的子HTML元素

对网格项目进行垂直排序不起作用

如何在Bootstrap中减少网格系统中单个div的宽度

Google脚本数组映射函数横向输出

Next.js中的服务器端组件列表筛选

重新呈现-react -筛选数据过多

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)?

如何调整下拉内容,使其不与其他元素重叠?

错误400:当我试图在React中使用put方法时,该字段是必需的

如何在单击Search按钮时更新Reaction组件?