data-visualization - 如何将工具提示添加到多系列折线图
问题描述
我是 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"
}
}
}
}
解决方案
您可以参考工具提示的文档,其中介绍了可用于在图表上启用工具提示的选项。
以下是具有默认工具提示或参考编辑器的示例配置:
{
"$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"}
}
}
}
要获得一些自定义的工具提示,您可以参考下面的代码或编辑器:
{
"$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"}
}
}
}
推荐阅读
- c - Printf 只返回零
- javascript - Node、Express 和 vue-cli
- android - 如何为多人游戏创建在颤振应用程序中运行的本地 websocket 服务器?
- angular - 覆盖 mat-stepper 角度材料中的默认图标
- java - 康威的生命游戏规则不适用
- css - 为什么我放border-bottom时会出现这种情况?
- heroku - 在 Heroku 上运行 supertest-fetch 的测试
- python - SQLAlchemy 多对多关系约束至少一个
- mysql - 有没有更快更好的方法来做这个 mysql 查询?
- ruby-on-rails - rake 任务上的 ActionMailer 循环每次运行时都会发送一封额外的邮件