charts - 使用 Vega 库创建停产折线图

Question

我希望在 Vega 中创建这种图表:

我在这里仔细阅读了关于标记的文档: https://vega.github.io/vega/docs/marks/line/

我阅读了有关类型特定标记属性 和已定义 属性的内容，它们似乎正是我所需要的。但是我不知道如何使用这个属性。

我的标记是这样定义的:

'marks': [
      {
        'name': 'expected_sales',
        'description': 'The sales line',
        'type': 'line',
        'defined': 'false', // this I added based on the documentation
        'from': {
          'data': 'SalesData'
        },
        'zindex': 100,
        'encode': { ... }
      }
 ]

但这显然行不通。该行仍在继续。我必须提到，我获得的数据点没有 null 值，而是 0.0。

Answer 1

考虑到销售额在某个时候可能为 0 美元，最好区分 0 值和 null 值。

也就是说，因为空值在数据集中定义为 0.0，所以 defined 属性必须对所有其他点为真，除非值为 0.0

在下面的示例中，"defined": {"signal": "datum.v !== 0.0"} 用于有条件地分配 "defined" 属性如果值 "datum.v" 为 0.0

，则为 false

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "values": [
        {"u": 1, "v": 28}, {"u": 2, "v": 12.0},
        {"u": 3, "v": 0.0}, {"u": 4, "v": 10},
        {"u": 5, "v": 36}, {"u": 6, "v": 44}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "table", "field": "u"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": false,
      "domain": {"data": "table", "field": "v"}
    }
  ],
  "axes": [
    {"scale": "xscale", "orient": "bottom", "grid": true},
    {"scale": "yscale", "orient": "left"}

  ],

  "marks": [
    {
      "type": "line",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "stroke": {"value": "#652c90"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "u"},
          "y": {"scale": "yscale", "field": "v"},
          "defined": {"signal": "datum.v !== 0.0"},
          "interpolate": {"value": "linear"},
          "strokeWidth": {"value": 4},
          "strokeDash": {"value": [1,0]},
          "strokeCap": {"value": "square"},
          "opacity": {"value": 1}
        },
        "hover": {
          "opacity": {"value": 0.5}
        }
      }
    }
  ]
}