在 Vega-lite 的工具提示中將時間戳格式化為日期

Question

我有這張圖表，它從 CSV 中獲取數據，將其以其中一列為軸心，並用線條顯示多個時間序列。 還使工具提示自動從 pivot 列中獲取名稱。

唯一的問題是日期/時間顯示為時間戳。 有沒有辦法讓它看起來更好看，就像實際的日期+時間一樣，就像它在 X 軸上的顯示方式一樣？

我知道我可以指定工具提示的所有值，比如

        "tooltip": [
    {
        "field": "date",
        "type": "temporal",
        "title": "date",
        "timeUnit": "utcyearmonthdatehoursminutes"
    },
    {...}
]

但我希望能夠繼續使用"mark": {"type": "rule", "tooltip": {"content": "data"}},以便能夠動態獲取工具提示字段，如果我添加上面的代碼，只有日期出現在工具提示中。

這是完整的代碼：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "width": 400,
  "height": 300,
  "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "encoding": {
        "color": {"field": "symbol", "type": "nominal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "layer": [
        {"mark": "line"},
        {"transform": [{"filter": {"param": "hover", "empty": false}}], "mark": "point"}
      ]
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": {"type": "rule", "tooltip": {"content": "data"}},
      "encoding": {
        "opacity": {
          "condition": {"value": 0.3, "param": "hover", "empty": false},
          "value": 0
        }
      },
      "params": [{
        "name": "hover",
        "select": {
          "type": "point",
          "fields": ["date"],
          "nearest": true,
          "on": "mouseover",
          "clear": "mouseout"
        }
      }]
    }
  ]
}

Answer 1

您可以在計算轉換中格式化日期字段並分配新字段，然后將顯示在您的工具提示中。 只需添加以下轉換代碼或檢查編輯器。 有關更多格式或日期表達式，請參閱https://vega.github.io/vega/docs/expressions

"transform": [
        {"pivot": "symbol", "value": "price", "groupby": ["date"]},
        {"calculate": "datetime(datum.date)", "as": "convertedDate"},
        {
          "calculate": "utcFormat(datum.date,'%B %d, %Y')",
          "as": "converted as string"
        }
      ],

如果要更新現有的日期字段，則只需在配置中提供日期字段， as所示：

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

Answer 2

我有同樣的問題，我通過以下方式解決了它：

• 從“標記”中刪除“工具提示”並將其放入“編碼”：

  “$模式”：“https://vega.github.io/schema/vega-lite/v5.json”，“寬度”：“容器”，“數據”：{“值”：{{dataViz2 | 安全的 }} }，
  “標記”：{ “類型”：“行”，
  “點”：{“填充”：假，“填充”：“白色”}}，
  “編碼”：{“x”：{“字段”：“日期”，“類型”：“時間”，“軸”：{“格式”：“%b %d”}}，“y”：{“ field": "total", "type": "quantitative"}, "tooltip": [ {"field": "date", "type": "temporal", "format": "%b %d %Y" }, {"field": "total", "type": "quantitative", "format": ",d" } ]
  }