内联值有什么问题？

Question

“折线图”演示工作正常，并用 JavaScript 表示，如getting_started.html中所示。

...但是当我将“数据”字段从 URL 替换为内联值时，它仅显示轴，没有图表。

有用："data":{"url":"https://vega.github.io/vega-lite/examples/data/stocks.csv"},

它不起作用：

var vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data":  {"values": [
      {"symbol":"MSFT","date":"Jan 1 2000","price":39.81},
      {"symbol":"MSFT","date":"Feb 1 2000","price":36.35},
      {"symbol":"MSFT","date":"Mar 1 2000","price":43.22},
      {"symbol":"MSFT","date":"Apr 1 2000","price":28.37},
      {"symbol":"MSFT","date":"May 1 2000","price":25.45}
  ]},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};

控制台出现错误，没有意义：

警告字段“日期”的无限范围：[Infinity，-Infinity]

Answer 1

您的规范仅包含带有symbol="MSFT". 它还包含一个过滤器转换 ，{"filter": "datum.symbol==='GOOG'"}它删除除带有 的行之外的所有行symbol="GOOG"。结果是没有数据可供绘制。

您看到的警告来自以下事实：轴范围是根据数据确定的，当没有数据时，范围保留在[-Infinity, Infinity]。

如果删除或修改此过滤器语句，图表将正常工作。例如：

vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data":  {"values": [
      {"symbol":"MSFT","date":"Jan 1 2000","price":39.81},
      {"symbol":"MSFT","date":"Feb 1 2000","price":36.35},
      {"symbol":"MSFT","date":"Mar 1 2000","price":43.22},
      {"symbol":"MSFT","date":"Apr 1 2000","price":28.37},
      {"symbol":"MSFT","date":"May 1 2000","price":25.45}
  ]},
  "transform": [{"filter": "datum.symbol==='MSFT'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};

结果如下所示（在 Vega 编辑器中打开图表）：