1 224
edições
m (→Gráficos) |
m (→Funcionando) |
||
Linha 143: | Linha 143: | ||
Teste de gráficos com dados JSON. | Teste de gráficos com dados JSON. | ||
'''Gráfico de barras''' | |||
<graph> | |||
{ | |||
"width": 400, | |||
"height": 200, | |||
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, | |||
"data": [ | |||
{ | |||
"name": "table", | |||
"values": [ | |||
{"x": 1, "y": 28}, {"x": 2, "y": 55}, | |||
{"x": 3, "y": 43}, {"x": 4, "y": 91}, | |||
{"x": 5, "y": 81}, {"x": 6, "y": 53}, | |||
{"x": 7, "y": 19}, {"x": 8, "y": 87}, | |||
{"x": 9, "y": 52}, {"x": 10, "y": 48}, | |||
{"x": 11, "y": 24}, {"x": 12, "y": 49}, | |||
{"x": 13, "y": 87}, {"x": 14, "y": 66}, | |||
{"x": 15, "y": 17}, {"x": 16, "y": 27}, | |||
{"x": 17, "y": 68}, {"x": 18, "y": 16}, | |||
{"x": 19, "y": 49}, {"x": 20, "y": 15} | |||
] | |||
} | |||
], | |||
"scales": [ | |||
{ | |||
"name": "x", | |||
"type": "ordinal", | |||
"range": "width", | |||
"domain": {"data": "table", "field": "x"} | |||
}, | |||
{ | |||
"name": "y", | |||
"type": "linear", | |||
"range": "height", | |||
"domain": {"data": "table", "field": "y"}, | |||
"nice": true | |||
} | |||
], | |||
"axes": [ | |||
{"type": "x", "scale": "x"}, | |||
{"type": "y", "scale": "y"} | |||
], | |||
"marks": [ | |||
{ | |||
"type": "rect", | |||
"from": {"data": "table"}, | |||
"properties": { | |||
"enter": { | |||
"x": {"scale": "x", "field": "x"}, | |||
"width": {"scale": "x", "band": true, "offset": -1}, | |||
"y": {"scale": "y", "field": "y"}, | |||
"y2": {"scale": "y", "value": 0} | |||
}, | |||
"update": { | |||
"fill": {"value": "steelblue"} | |||
}, | |||
"hover": { | |||
"fill": {"value": "red"} | |||
} | |||
} | |||
} | |||
] | |||
} | |||
</graph> | |||
<br>'''Gráfico de áreas''' | |||
<graph> | |||
{ | |||
"width": 500, | |||
"height": 200, | |||
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, | |||
"data": [ | |||
{ | |||
"name": "table", | |||
"values": [ | |||
{"x": 1, "y": 28}, {"x": 2, "y": 55}, | |||
{"x": 3, "y": 43}, {"x": 4, "y": 91}, | |||
{"x": 5, "y": 81}, {"x": 6, "y": 53}, | |||
{"x": 7, "y": 19}, {"x": 8, "y": 87}, | |||
{"x": 9, "y": 52}, {"x": 10, "y": 48}, | |||
{"x": 11, "y": 24}, {"x": 12, "y": 49}, | |||
{"x": 13, "y": 87}, {"x": 14, "y": 66}, | |||
{"x": 15, "y": 17}, {"x": 16, "y": 27}, | |||
{"x": 17, "y": 68}, {"x": 18, "y": 16}, | |||
{"x": 19, "y": 49}, {"x": 20, "y": 15} | |||
] | |||
} | |||
], | |||
"scales": [ | |||
{ | |||
"name": "x", | |||
"type": "linear", | |||
"range": "width", | |||
"zero": false, | |||
"domain": {"data": "table", "field": "x"} | |||
}, | |||
{ | |||
"name": "y", | |||
"type": "linear", | |||
"range": "height", | |||
"nice": true, | |||
"domain": {"data": "table", "field": "y"} | |||
} | |||
], | |||
"axes": [ | |||
{"type": "x", "scale": "x", "ticks": 20}, | |||
{"type": "y", "scale": "y"} | |||
], | |||
"marks": [ | |||
{ | |||
"type": "area", | |||
"from": {"data": "table"}, | |||
"properties": { | |||
"enter": { | |||
"interpolate": {"value": "monotone"}, | |||
"x": {"scale": "x", "field": "x"}, | |||
"y": {"scale": "y", "field": "y"}, | |||
"y2": {"scale": "y", "value": 0}, | |||
"fill": {"value": "steelblue"} | |||
}, | |||
"update": { | |||
"fillOpacity": {"value": 1} | |||
}, | |||
"hover": { | |||
"fillOpacity": {"value": 0.5} | |||
} | |||
} | |||
} | |||
] | |||
} | |||
</graph> | |||
'''Gráfico de linhas'''<graph>{ | |||
"version": 2, | |||
"width": 400, | |||
"height": 200, | |||
"data": [ | |||
{ | |||
"name": "table", | |||
"values": [ | |||
{ | |||
"x": 0, | |||
"y": 1 | |||
}, | |||
{ | |||
"x": 1, | |||
"y": 3 | |||
}, | |||
{ | |||
"x": 2, | |||
"y": 2 | |||
}, | |||
{ | |||
"x": 3, | |||
"y": 4 | |||
} | |||
] | |||
} | |||
], | |||
"scales": [ | |||
{ | |||
"name": "x", | |||
"type": "linear", | |||
"range": "width", | |||
"zero": false, | |||
"domain": { | |||
"data": "table", | |||
"field": "x" | |||
} | |||
}, | |||
{ | |||
"name": "y", | |||
"type": "linear", | |||
"range": "height", | |||
"nice": true, | |||
"domain": { | |||
"data": "table", | |||
"field": "y" | |||
} | |||
} | |||
], | |||
"axes": [ | |||
{ | |||
"type": "x", | |||
"scale": "x" | |||
}, | |||
{ | |||
"type": "y", | |||
"scale": "y" | |||
} | |||
], | |||
"marks": [ | |||
{ | |||
"type": "line", | |||
"from": { | |||
"data": "table" | |||
}, | |||
"properties": { | |||
"enter": { | |||
"x": { | |||
"scale": "x", | |||
"field": "x" | |||
}, | |||
"y": { | |||
"scale": "y", | |||
"field": "y" | |||
}, | |||
"y2": { | |||
"scale": "y", | |||
"value": 0 | |||
}, | |||
"interpolate": { | |||
"value": "monotone" | |||
}, | |||
"stroke": { | |||
"value": "steelblue" | |||
}, | |||
"strokeWidth": { | |||
"value": 3 | |||
} | |||
} | |||
} | |||
} | |||
] | |||
}</graph> | |||
'''Gráfico interativo''' | |||
<graph mode=interactive> | |||
{ | |||
// We want to use Vega 2, and specify image size | |||
"version": 2, "width": 300, "height": 80, | |||
// Set padding to the same value on all sides | |||
"padding": 12, | |||
// By default the background is transparent | |||
"background": "#edf1f7", | |||
"marks": [ | |||
{ | |||
// Draw a horizontal line | |||
"name": "scrollLine", | |||
"type": "rule", | |||
"properties": { | |||
"enter": { | |||
"x": {"value": 0}, | |||
"y": {"value": 40}, | |||
"x2": {"value": 300}, | |||
"stroke": {"value": "#000"}, | |||
"strokeWidth": {"value": 2} | |||
} | |||
} | |||
}, | |||
{ | |||
// Draw a triangle shape with a hover effect | |||
// naming objects allows us to reference them later | |||
"name": "handle", | |||
"type": "path", | |||
"properties": { | |||
"enter": { | |||
"x": {"value": 200}, | |||
"y": {"value": 40}, | |||
// path syntax is the same as SVG's path tag | |||
"path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, | |||
"stroke": {"value": "#880"}, | |||
"strokeWidth": {"value": 2.5} | |||
}, | |||
"update": {"fill": {"value": "#fff"} }, | |||
// Change fill color of the object on mouse hover | |||
"hover": {"fill": {"value": "#f00"} } | |||
} | |||
} | |||
] | |||
} | |||
</graph> | |||
=== Não funcionando === | === Não funcionando === |
edições