我几乎已经找到了一个可以达到预期效果的解决方案。然而,有一件事我仍然在努力解决-这可能不是太困难,但我正在习惯Vega,它与Vega Lite有点不同。
目前,条形从0增长到4000,使用硬编码值,该值应替换为与每个条形对应的动态值。
下面是需要修改的信号,以动态存储每个条形图的对应值,而不是使用硬编码值(代码中的第5-8行):
{
"name": "ceiling_value",
"value": 4000
}
字符串
然后,信号被传递到箝位功能,该功能确定杆的最小和最大范围:
{
"type": "formula",
"as": "value",
"expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
}
型
完整代码:
{
"width": 200,
"height": 220,
"signals": [
{
"name": "ceiling_value",
"value": 4000
},
{
"name": "increment",
"value": 1,
"on": [
{
"events": "timer{70}",
"update": "increment + 500"
}
]
}
],
"data": [
{
"name": "table",
"values": [
{"day": "1", "value": 2200,"zero_measure": 0},
{"day": "2", "value": 3200,"zero_measure": 0},
{"day": "3", "value": 1800,"zero_measure": 0},
{"day": "4", "value": -1500,"zero_measure": 0},
{"day": "5", "value": 700,"zero_measure": 0}
],
"transform": [
{
"type": "formula",
"as": "day",
"expr": "datum['day']"
},
{
"type": "formula",
"as": "value",
"expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "table",
"field": "day"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": [0, 6000],
"range": "height"
}
],
"axes": [
{
"orient": "left",
"scale": "yscale"
},
{
"orient": "bottom",
"scale": "xscale"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "day"
},
"width": {
"scale": "xscale",
"band": 0.8,
"offset": -1
},
"fill": {
"value": "steelblue"
},
"cornerRadius": {"value": 4}
},
"update": {
"y": {
"scale": "yscale",
"field": "value"
},
"y2": {
"scale": "yscale",
"value": 0
}
}
}
}
]
}
型
有人能帮忙吗?非常感谢!(也就是感谢大卫谁总是愿意帮助:))
1条答案
按热度按时间kse8i1jr1#
你应该能适应这个。
的数据
字符串