我如何将工具提示添加到多系列折线图

Question

我是 WebStorm 和 vega/vegalite 的新手，我正在使用不同类型的汽油及其 1996 年至 2020 年的价格创建视觉效果。

我已经能够创建包含所有信息的图表，但很难辨别任何内容。

我查看了 Vega-Lite 文档，发现可以使用工具提示来放大图形。我尝试实现它，但我认为我不太了解某些属性的范围。

有人可以告诉我他们如何完成这项任务吗？或者甚至可以推荐可以帮助我更好地理解如何操作的视频或网站？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Area charts of stock prices, with an interactive overview and filtered detail views.",
  "width": 720,
  "height": 480,
  "padding": 5,
  "data": {
    "name": "gas_prices",
    "url": "data/testInfo.csv",
    "format": {"type": "csv", "parse": {"A1": "number", "date": "date"}}
  },


  "repeat": {
    "layer": ["A1","A2","A3","R1","R2","R3","M1","M2","M3","P1","P2","P3","D1"]
  },


  "spec": {
    "mark": "line",
    "encoding": {
      "x": {
        "timeUnit": "yearmonth",
        "title": "Date",
        "field": "date"
      },
      "y": {
        "field": {"repeat":"layer"},
        "title": "Gas Prices",
        "type": "quantitative"
      },
      "color": {
        "datum": {"repeat": "layer"},
        "type": "nominal"
      }
    }


 }
}

Answer 1

您可以参考 documentation 工具提示，其中介绍了可用于在图表上启用工具提示的选项。

以下是具有默认工具提示的示例配置或参考 editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "repeat": ["Horsepower", "Miles_per_Gallon", "Acceleration", "Displacement"],
  "columns": 2,
  "spec": {
    "data": {"url": "data/cars.json"},
    "mark": {"type": "bar", "tooltip": true},
    "encoding": {
      "x": {"field": {"repeat": "repeat"}, "bin": true},
      "y": {"aggregate": "count"},
      "color": {"field": "Origin"}
    }
  }
}

要有一些自定义的工具提示，您可以参考下面的代码或editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "repeat": ["Horsepower", "Miles_per_Gallon", "Acceleration", "Displacement"],
  "columns": 2,
  "spec": {
    "data": {"url": "data/cars.json"},
    "mark": "bar",
    "encoding": {
      "tooltip": [
        {"aggregate": "count", "title": "YAxis"},
        {"field": {"repeat": "repeat"}, "title": "myXAxis"}
      ],
      "x": {"field": {"repeat": "repeat"}, "bin": true},
      "y": {"aggregate": "count"},
      "color": {"field": "Origin"}
    }
  }
}

我如何将工具提示添加到多系列折线图

How would I add a tooltip to a multi series line chart

data-visualization

linechart

vega

vega-lite