Создайте прекращенную линейную диаграмму, используя Vega lib - PullRequest
Новая
       25

Создайте прекращенную линейную диаграмму, используя Vega lib

2 голосов
/ 15 марта 2019

Я хочу создать такой график в Vega:

A basic Excel discontinued line chart

Я внимательно читаю документацию о отметках здесь: 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.

1 Ответ

1 голос
/ 15 марта 2019

Учитывая, что в какой-то момент объем продаж может составлять $ 0, лучше различать значения 0 и null.

Тем не менее, поскольку нулевые значения определены как 0.0 в наборе данных, свойство defined должно быть истинным для всех остальных точек, кроме случаев, когда значение равно 0.0

В приведенном нижеНапример, "defined": {"signal": "datum.v !== 0.0"} используется для условного присвоения свойству "defined" значения false, если значение "datum.v" равно 0,0 

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