我一直在玩Vega,但我无法理解如何将垂直条形图转换成水平条形图。
不久前在这里发布了一个类似的问题:vega horizontal bar charts但是提供的答案并不十分清楚,为了产生预期结果,对代码的确切做法是什么。我也无法让解决方案运行!
我现在的理解是你需要切换X和Y轴并进行缩放,但是我迷失的地方也是要翻转标记?我已经尝试设置“x”和“y”属性,但我只是得到一张空白的图表作为回报......真的感觉我只是因为我的轴是正确的而错过了一件事,但无法弄清楚它是什么是!
编辑:取得了一些进展!我的专栏现在正在出现,但他们的位置与实际的嘀嗒声相差很远。我已经研究过调整序数标度的“点”参数,但结果是最后一列And with the "points" parameter set to true for the y scale.
这是我到目前为止的代码
{
"width": 400,
"height": 400,
"padding": {
"top": 30,
"left": 40,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": "Mon",
"y": 2
},
{
"x": "Tue",
"y": 3
},
{
"x": "Wed",
"y": 10
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"points": true
"range": "height",
"zero": false,
"domain": {
"data": "table",
"field": "x"
}
},
{
"name": "y",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "y"
},
"nice": true
}
],
"axes": [
{
"type": "x",
"scale": "y"
},
{
"type": "y",
"scale": "x"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "y",
"field": "y"
},
"x2": {
"value": 0
},
"yc": {
"scale": "x",
"field": "x"
},
"height": {
"value": 40
},
"fill": {
"r": {
"value": 66
},
"g": {
"value": 190
},
"b": {
"value": 244
}
}
}
}
}
]
}
答案 0 :(得分:0)
胜利!
这是一个有效的规范!
我使用"填充"顺序量表的属性,以获得理想的结果。
{
"width": 400,
"height": 400,
"padding": {
"top": 30,
"left": 40,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": "Mon",
"y": 2
},
{
"x": "Tue",
"y": 3
},
{
"x": "Wed",
"y": 10
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "height",
"points": true,
"padding": 1,
"zero": false,
"domain": {
"data": "table",
"field": "x"
}
},
{
"name": "y",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "y"
},
"nice": true
}
],
"axes": [
{
"type": "x",
"scale": "y"
},
{
"type": "y",
"scale": "x"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "y",
"field": "y"
},
"x2": {
"value": 0
},
"yc": {
"scale": "x",
"field": "x"
},
"height": {
"value": 40
},
"fill": [
66,
190,
244
]
}
}
}
]
}