vega-lite - 我可以让它看起来更像一个箱形图吗
问题描述
我正在使用提供最小值、最大值、Q1、Q2 和 Q3 数据的 Elasticsearch。我所要做的就是以箱形图的形式绘制它。Kibana 目前仅支持 vega-lite 版本 2.6.0 和 vega 4.3.0。
这是我制作的完整示例。
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 100,
"height": 200,
"padding": 10,
"data": {
"name": "sample",
"values": [
{
"task": "A",
"min" : 72.66500091552734,
"max" : 139.54299926757812,
"q1" : 98.68599700927734,
"q2" : 120.12850189208984,
"q3" : 121.82099914550781
},
{
"task": "B",
"min" : 71.66500091552734,
"max" : 159.54299926757812,
"q1" : 88.68599700927734,
"q2" : 110.12850189208984,
"q3" : 141.82099914550781
},
{
"task": "c",
"min" : 45.66500091552734,
"max" : 169.54299926757812,
"q1" : 88.68599700927734,
"q2" : 110.12850189208984,
"q3" : 141.82099914550781
}
]
},
"layer": [
{
"width": 5,
"encoding": {
"x": {"type": "ordinal","field": "task"},
"y": {"type": "quantitative","field": "min"},
"y2": {"type": "quantitative","field": "max"},
"color": {"value": "#2CB5E8"}
},
"mark": {
"type": "bar"
}
},
{
"width": 20,
"encoding": {
"x": {"type": "ordinal","field": "task"},
"y": {"type": "quantitative","field": "q1"},
"y2": {"type": "quantitative","field": "q3"},
"color": {"value": "#EB985E"}
},
"mark": "bar"
},
{
"encoding": {
"x": {"type": "ordinal","field": "task"},
"y": {"type": "quantitative","field": "q2"},
"color": {"value": "#090502"}
},
"mark": "point"
}
]
}
当前版本的 vega-lite 确实支持箱线图。但我坚持使用旧版本。
我正在尝试减小最小值和最大值的条形图的宽度。并在第一季度和第三季度保持厚实。不知何故,它不工作。
也可以将 Q2 绘制为一条直线而不是一个点吗?
解决方案
您可以使用带有条形图、刻度线和标尺标记的层状图手动构建箱线图。例如(在编辑器中查看):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 100,
"height": 200,
"data": {
"name": "sample",
"values": [
{
"task": "A",
"min": 72.66500091552734,
"max": 139.54299926757812,
"q1": 98.68599700927734,
"q2": 120.12850189208984,
"q3": 121.82099914550781
},
{
"task": "B",
"min": 71.66500091552734,
"max": 159.54299926757812,
"q1": 88.68599700927734,
"q2": 110.12850189208984,
"q3": 141.8209991455078
},
{
"task": "c",
"min": 45.66500091552734,
"max": 169.54299926757812,
"q1": 88.68599700927734,
"q2": 110.12850189208984,
"q3": 141.8209991455078
}
]
},
"layer": [
{
"encoding": {
"x": {"type": "ordinal", "field": "task"},
"y": {"type": "quantitative", "field": "min"},
"y2": {"type": "quantitative", "field": "max"}
},
"mark": {"type": "rule", "color": "black"}
},
{
"encoding": {
"x": {"type": "ordinal", "field": "task"},
"y": {"type": "quantitative", "field": "q1"},
"y2": {"type": "quantitative", "field": "q3"}
},
"mark": {"type": "bar", "color": "#EB985E", "size": 20}
},
{
"encoding": {
"x": {"type": "ordinal", "field": "task"},
"y": {"type": "quantitative", "field": "q2"}
},
"mark": {"type": "tick", "color": "gray", "size": 20}
}
]
}
推荐阅读
- c++ - 有时如何以及为什么使用未编译的 C/C++?
- c# - 在 Google.Apis.Pagespeedonline.v5 中,如何一次调用所有类别?
- influxdb - 从 Influxdb 子查询插入,缺少行且时间设置为 0
- javascript - 设置反应 CreatableSelect 的最大字符输入大小
- python-3.x - 如何为 pandas 表着色并将其导出为 html
- javascript - Gulp:任务从未定义:任务
- reactjs - 如何在不使用 ThemeProvider 的情况下将主题传递给深层嵌套样式的组件?withTheme 没有削减它
- android - 如何将 Android ViewPager2 的高度包装到当前项目的高度?
- python - 将输出保存到两个 csv 列
- javascript - 将flask通过HTTP post接收的变量传递给flask上html模板中的JavaScript?