在utcmonthdate上绘图时，Vega-lite图表失败

Question

为什么这个vega-lite图形无法显示任何数据？ y轴应该显示总小时数，x轴应该显示一系列月日组合。相反，它什么也不显示。如果我将y轴类型从“时间”更改为“垂直”，它将显示全部堆积在单个列中的数据，而不是散布在几天内，所以我知道数据很好。

Vega Editor Here

{
  "data": {    
          "values": [ 
            {"category": "Cleaning", "_source": {"hours": 7, "date": "2020-04-12T00:00:00.000Z"}},
            {"category": "Cleaning", "_source": {"hours": 10, "date": "2020-04-06T00:00:00.000Z"}},
            {"category": "Accounting", "_source": {"hours": 10, "date": "2020-04-07T00:00:00.000Z"}},
            {"category": "Accounting", "_source": {"hours": 6, "date": "2020-04-11T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 3, "date": "2020-04-13T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 2, "date": "2020-04-15T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 22, "date": "2020-04-17T00:00:00.000Z"}},
            {"category": "Programming", "_source": {"hours": 5, "date": "2020-04-19T00:00:00.000Z"}},
            {"category": "QA", "_source": {"hours": 15, "date": "2020-04-21T00:00:00.000Z"}},
            {"category": "QA", "_source": {"hours": 30, "date": "2020-04-23T00:00:00.000Z"}},
            {"category": "QA", "_source": {"hours": 30, "date": "2020-04-14T00:00:00.000Z"}}
          ]},
  "transform": [
    {
      "lookup": "category",
      "from": {
        "data": {    
          "name": "hits.hits",
          "values": [
              {"type": "Cleaning", "_source": { "department": "Janitorial"}},
              {"type": "Accounting", "_source": { "department": "Finance"}},
              {"type": "Programming", "_source": { "department": "R and D"}},
              {"type": "QA", "_source": { "department": "R and D"}}
          ]},
        "key": "type",
        "fields": ["_source.department"]
      }
    },
    {"calculate": "datum.category+' - '+datum['_source.department']", "as": "legend"},
    {"timeUnit": "utcmonthdate", "field": "_source.date", "as": "date"},
    {"calculate": "datum._source.hours", "as": "hours"},
    {"aggregate": 
      [{"op": "sum", "field": "hours", "as": "totalhours"}], 
      "groupby": ["legend", "date", "totalhours"]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"timeUnit": "utcmonthdate",
          "field": "date",
          "type": "temporal"
    },
    "y": {"field": "totalhours", "type": "quantitative"},
    "color": {
      "field": "legend",
      "title": "My Legend",
      "type": "nominal",
      "legend": {"orient": "top"}
    }
  }
}

Answer 1

通过转换定义timeUnit时，必须确保将任何输入都解析为日期。您可以使用带有toDate表达式的计算转换来做到这一点：

{"calculate": "toDate(datum._source.date)", "as": "date"}

这是您的示例（vega editor）的外观：

{
  "data": {
    "values": [
      {
        "category": "Cleaning",
        "_source": {"hours": 7, "date": "2020-04-12T00:00:00.000Z"}
      },
      {
        "category": "Cleaning",
        "_source": {"hours": 10, "date": "2020-04-06T00:00:00.000Z"}
      },
      {
        "category": "Accounting",
        "_source": {"hours": 10, "date": "2020-04-07T00:00:00.000Z"}
      },
      {
        "category": "Accounting",
        "_source": {"hours": 6, "date": "2020-04-11T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 3, "date": "2020-04-13T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 2, "date": "2020-04-15T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 22, "date": "2020-04-17T00:00:00.000Z"}
      },
      {
        "category": "Programming",
        "_source": {"hours": 5, "date": "2020-04-19T00:00:00.000Z"}
      },
      {
        "category": "QA",
        "_source": {"hours": 15, "date": "2020-04-21T00:00:00.000Z"}
      },
      {
        "category": "QA",
        "_source": {"hours": 30, "date": "2020-04-23T00:00:00.000Z"}
      },
      {
        "category": "QA",
        "_source": {"hours": 30, "date": "2020-04-14T00:00:00.000Z"}
      }
    ]
  },
  "transform": [
    {
      "lookup": "category",
      "from": {
        "data": {
          "name": "hits.hits",
          "values": [
            {"type": "Cleaning", "_source": {"department": "Janitorial"}},
            {"type": "Accounting", "_source": {"department": "Finance"}},
            {"type": "Programming", "_source": {"department": "R and D"}},
            {"type": "QA", "_source": {"department": "R and D"}}
          ]
        },
        "key": "type",
        "fields": ["_source.department"]
      }
    },
    {
      "calculate": "datum.category+' - '+datum['_source.department']",
      "as": "legend"
    },
    {"calculate": "toDate(datum._source.date)", "as": "date"},
    {"timeUnit": "utcmonthdate", "field": "date", "as": "date"},
    {"calculate": "datum._source.hours", "as": "hours"},
    {
      "aggregate": [{"op": "sum", "field": "hours", "as": "totalhours"}],
      "groupby": ["legend", "date", "totalhours"]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"timeUnit": "utcmonthdate", "field": "date", "type": "temporal"},
    "y": {"field": "totalhours", "type": "quantitative"},
    "color": {
      "field": "legend",
      "title": "My Legend",
      "type": "nominal",
      "legend": {"orient": "top"}
    }
  }
}