使用Vega lib创建停产的折线图

Question

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

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

我阅读了有关特定于类型的标记属性和有关 defined 属性的信息，这似乎是我所需要的。但是我不知道如何使用此属性。

我的标记定义如下：

'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属性都必须为true

在下面的示例中，如果值"defined": {"signal": "datum.v !== 0.0"}为0.0，则"defined"用于有条件地将"datum.v"属性赋值为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}
        }
      }
    }
  ]
}