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

【问题标题】：How would I add a tooltip to a multi series line chart如何将工具提示添加到多系列折线图
【发布时间】：2021-09-18 00:50:04
【问题描述】：

我是 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"
      }
    }


 }
}

【问题讨论】：

标签： data-visualization linechart vega-lite vega

【解决方案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"}
    }
  }
}

【讨论】：