Я пытаюсь получить вертикальный заполненный график области, где область слева между осью Y и линией данных заполнена. По сути, возьмите график нормальной площади и поверните его на 90 градусов по часовой стрелке.
Я просто взял пример из примеров vega и попытался преобразовать все в вертикальное, изменил имена шкал на более взаимосвязанныек данным, и добавил ширину и цвет линии.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"signals": [
{
"name": "interpolate",
"value": "linear",
"bind": {
"input": "select",
"options": [
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
]
}
}
],
"data": [
{
"name": "table",
"values": [
{"u": 1, "v": 28}, {"u": 2, "v": 55},
{"u": 3, "v": 43}, {"u": 4, "v": 91},
{"u": 5, "v": 81}, {"u": 6, "v": 53},
{"u": 7, "v": 19}, {"u": 8, "v": 87},
{"u": 9, "v": 52}, {"u": 10, "v": 48},
{"u": 11, "v": 24}, {"u": 12, "v": 49},
{"u": 13, "v": 87}, {"u": 14, "v": 66},
{"u": 15, "v": 17}, {"u": 16, "v": 27},
{"u": 17, "v": 68}, {"u": 18, "v": 16},
{"u": 19, "v": 49}, {"u": 20, "v": 15}
]
}
],
"scales": [
{
"name": "uscale",
"type": "linear",
"range": "height",
"zero": false,
"domain": {"data": "table", "field": "u"}
},
{
"name": "vscale",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "v"}
}
],
"axes": [
{"orient": "bottom", "scale": "vscale", "tickCount": 25},
{"orient": "left", "scale": "uscale"}
],
"marks": [
{
"type": "area",
"orient": "horizontal",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "vscale", "field": "v"},
"y": {"scale": "uscale", "field": "u"},
"x2": {"scale": "vscale", "value": 0},
"stroke": {"value": "#000000"},
"fill": {"value": "steelblue"}
},
"update": {
"interpolate": {"signal": "interpolate"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}
Уверен, я здесь что-то не так делаю. В соответствии с документацией «вертикальная» ориентация используется по умолчанию, и я пробовал это с x2 и y2, и ориентировал «вертикальный» и «горизонтальный» для обоих - я также пытался установить масштаб как vscale и uscale для x2и y2.
Я не получаю ошибок в онлайн-редакторе vega - линия верна, но я ожидаю, что график будет заполнен слева от линии между осью y и линией графика. Фактический результат прямо сейчас - сплошная линия.