Шаблон:Graph:Chart: различия между версиями
Перейти к навигации
Перейти к поиску
Admin (обсуждение | вклад) Нет описания правки |
Admin (обсуждение | вклад) Нет описания правки |
||
Строка 2: | Строка 2: | ||
{ | { | ||
"$schema": "https://vega.github.io/schema/vega/v5.json", | "$schema": "https://vega.github.io/schema/vega/v5.json", | ||
"description": "A basic | "description": "A basic bar chart example, with value labels shown upon mouse hover.", | ||
"width": | "width": 400, | ||
"height": 200, | "height": 200, | ||
"padding": 5, | "padding": 5, | ||
" | "data": [ | ||
{ | { | ||
"name": " | "name": "table", | ||
" | "values": [ | ||
{"category": "A", "amount": 28}, | |||
" | {"category": "B", "amount": 55}, | ||
" | {"category": "C", "amount": 43}, | ||
{"category": "D", "amount": 91}, | |||
{"category": "E", "amount": 81}, | |||
{"category": "F", "amount": 53}, | |||
{"category": "G", "amount": 19}, | |||
{"category": "H", "amount": 87} | |||
] | |||
} | } | ||
], | ], | ||
" | "signals": [ | ||
{ | { | ||
"name": " | "name": "tooltip", | ||
" | "value": {}, | ||
"on": [ | |||
{"events": "rect:mouseover", "update": "datum"}, | |||
{"events": "rect:mouseout", "update": "{}"} | |||
{" | |||
{" | |||
] | ] | ||
} | } | ||
Строка 48: | Строка 36: | ||
"scales": [ | "scales": [ | ||
{ | { | ||
"name": " | "name": "xscale", | ||
"type": " | "type": "band", | ||
"domain": {"data": "table", "field": "category"}, | |||
"range": "width", | "range": "width", | ||
" | "padding": 0.05, | ||
"round": true | |||
}, | }, | ||
{ | { | ||
"name": " | "name": "yscale", | ||
" | "domain": {"data": "table", "field": "amount"}, | ||
"nice": true, | "nice": true, | ||
"range": "height" | |||
"range": " | |||
} | } | ||
], | ], | ||
"axes": [ | "axes": [ | ||
{"orient": "bottom", "scale": " | { "orient": "bottom", "scale": "xscale" }, | ||
{"orient": "left", "scale": " | { "orient": "left", "scale": "yscale" } | ||
], | ], | ||
"marks": [ | "marks": [ | ||
{ | { | ||
"type": " | "type": "rect", | ||
"from": { | "from": {"data":"table"}, | ||
" | "encode": { | ||
" | "enter": { | ||
" | "x": {"scale": "xscale", "field": "category"}, | ||
" | "width": {"scale": "xscale", "band": 1}, | ||
"y": {"scale": "yscale", "field": "amount"}, | |||
"y2": {"scale": "yscale", "value": 0} | |||
}, | |||
"update": { | |||
"fill": {"value": "steelblue"} | |||
}, | |||
"hover": { | |||
"fill": {"value": "red"} | |||
} | } | ||
}, | } | ||
" | }, | ||
{ | |||
"type": "text", | |||
" | "encode": { | ||
" | "enter": { | ||
"align": {"value": "center"}, | |||
"baseline": {"value": "bottom"}, | |||
"fill": {"value": "#333"} | |||
}, | |||
"update": { | |||
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, | |||
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, | |||
"text": {"signal": "tooltip.amount"}, | |||
"fillOpacity": [ | |||
{"test": "datum === tooltip", "value": 0}, | |||
" | {"value": 1} | ||
] | |||
} | |||
} | } | ||
} | |||
} | } | ||
] | ] | ||
} | } | ||
</graph> | </graph> |