Это набор примеров использования VegaChart . Вы можете найти множество других примеров Vega и Vega-Lite , которые можно использовать с VegaChart.
Примеры VegaChart с Vega Пример тепловой карты VegaChart может рисовать тепловую карту, используя простые rect
метки для каждой ячейки. ( оригинальный пример )
В этом примере данные о температуре загружаются из CSV-файла с использованием следующей спецификации «данных».
"data": [
{
"name": "temperature",
"url": "https://vega.github.io/editor/data/seattle-temps.csv"
...
}
]
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"title": {
"text": "Seattle Annual Temperatures",
"anchor": "middle",
"fontSize": 16,
"frame": "group",
"offset": 4
},
"data": [
{
"name": "temperature",
"url": "https://vega.github.io/vega/data/seattle-weather-hourly-normals.csv",
"format": {"type": "csv", "parse": {"temperature": "number", "date": "date"}},
"transform": [
{
"type": "formula", "as": "hour",
"expr": "hours(datum.date)"
},
{
"type": "formula", "as": "day",
"expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"
}
]
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "temperature", "field": "day"},
"range": "width"
},
{
"name": "y",
"type": "band",
"domain": [
6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5
],
"range": "height"
},
{
"name": "color",
"type": "linear",
"range": {"scheme": "redyellowblue"},
"domain": {"data": "temperature", "field": "temperature"},
"reverse": true,
"zero": false, "nice": true
}
],
"axes": [
{"orient": "bottom", "scale": "x", "domain": false, "title": "Month", "format": "%b"},
{
"orient": "left", "scale": "y", "domain": false, "title": "Hour",
"encode": {
"labels": {
"update": {
"text": {
"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"
}
}
}
}
}
],
"legends": [
{
"fill": "color",
"type": "gradient",
"title": "Avg. Temp (°F)",
"titleFontSize": 12,
"titlePadding": 4,
"gradientLength": {"signal": "height - 16"}
}
],
"marks": [
{
"type": "rect",
"from": {"data": "temperature"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "day"},
"y": {"scale": "y", "field": "hour"},
"width": {"value": 5},
"height": {"scale": "y", "band": 1},
"tooltip": {
"signal":
"timeFormat(datum.date, '%b %d %I:00 %p') + ': ' + datum.temperature + '°'"
}
},
"update": {
"fill": {"scale": "color", "field": "temperature"}
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 500px;"></div>
</body>
</html>
Пример контура вулкана VegaChart может рисовать диаграмму Volcano Contour, используя преобразование icocontour
. ( оригинальный пример )
В этом примере данные вулкана загружаются из файла json с использованием следующей спецификации данных.
"data": [
{
"name": "volcano",
"url": "https://vega.github.io/editor/data/volcano.json"
}
]
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "autosize": "none", "signals": [ { "name": "grid", "init": "data('volcano')[0]" }, { "name": "height", "update": "round(grid.height * width / grid.width)" }, { "name": "smooth", "value": true, "bind": {"input": "radio", "options": [true, false]} } ], "data": [ { "name": "volcano", "url": "https://vega.github.io/editor/data/volcano.json" }, { "name": "contours", "source": "volcano", "transform": [ { "type": "isocontour", "scale": {"expr": "width / datum.width"}, "smooth": {"signal": "smooth"}, "thresholds": {"signal": "sequence(90, 195, 5)"} } ] } ], "scales": [ { "name": "color", "type": "linear", "domain": [90, 190], "range": {"scheme": "blueorange"} } ], "marks": [ { "type": "path", "from": {"data": "contours"}, "encode": { "enter": { "stroke": {"value": "#ccc"}, "strokeWidth": {"value": 1}, "fill": {"scale": "color", "field": "contour.value"} } }, "transform": [ { "type": "geopath", "field": "datum.contour" } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "autosize": "none", "signals": [ { "name": "grid", "init": "data('volcano')[0]" }, { "name": "height", "update": "round(grid.height * width / grid.width)" }, { "name": "smooth", "value": true, "bind": {"input": "radio", "options": [true, false]} } ], "data": [ { "name": "volcano", "url": "https://vega.github.io/editor/data/volcano.json" }, { "name": "contours", "source": "volcano", "transform": [ { "type": "isocontour", "scale": {"expr": "width / datum.width"}, "smooth": {"signal": "smooth"}, "thresholds": {"signal": "sequence(90, 195, 5)"} } ] } ], "scales": [ { "name": "color", "type": "linear", "domain": [90, 190], "range": {"scheme": "blueorange"} } ], "marks": [ { "type": "path", "from": {"data": "contours"}, "encode": { "enter": { "stroke": {"value": "#ccc"}, "strokeWidth": {"value": 1}, "fill": {"scale": "color", "field": "contour.value"} } }, "transform": [ { "type": "geopath", "field": "datum.contour" } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "autosize": "none", "signals": [ { "name": "grid", "init": "data('volcano')[0]" }, { "name": "height", "update": "round(grid.height * width / grid.width)" }, { "name": "smooth", "value": true, "bind": {"input": "radio", "options": [true, false]} } ], "data": [ { "name": "volcano", "url": "https://vega.github.io/editor/data/volcano.json" }, { "name": "contours", "source": "volcano", "transform": [ { "type": "isocontour", "scale": {"expr": "width / datum.width"}, "smooth": {"signal": "smooth"}, "thresholds": {"signal": "sequence(90, 195, 5)"} } ] } ], "scales": [ { "name": "color", "type": "linear", "domain": [90, 190], "range": {"scheme": "blueorange"} } ], "marks": [ { "type": "path", "from": {"data": "contours"}, "encode": { "enter": { "stroke": {"value": "#ccc"}, "strokeWidth": {"value": 1}, "fill": {"scale": "color", "field": "contour.value"} } }, "transform": [ { "type": "geopath", "field": "datum.contour" } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "autosize": "none", "signals": [ { "name": "grid", "init": "data('volcano')[0]" }, { "name": "height", "update": "round(grid.height * width / grid.width)" }, { "name": "smooth", "value": true, "bind": {"input": "radio", "options": [true, false]} } ], "data": [ { "name": "volcano", "url": "https://vega.github.io/editor/data/volcano.json" }, { "name": "contours", "source": "volcano", "transform": [ { "type": "isocontour", "scale": {"expr": "width / datum.width"}, "smooth": {"signal": "smooth"}, "thresholds": {"signal": "sequence(90, 195, 5)"} } ] } ], "scales": [ { "name": "color", "type": "linear", "domain": [90, 190], "range": {"scheme": "blueorange"} } ], "marks": [ { "type": "path", "from": {"data": "contours"}, "encode": { "enter": { "stroke": {"value": "#ccc"}, "strokeWidth": {"value": 1}, "fill": {"scale": "color", "field": "contour.value"} } }, "transform": [ { "type": "geopath", "field": "datum.contour" } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); }
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 600,
"autosize": "none",
"signals": [
{
"name": "grid",
"init": "data('volcano')[0]"
},
{
"name": "height",
"update": "round(grid.height * width / grid.width)"
},
{
"name": "smooth", "value": true,
"bind": {"input": "radio", "options": [true, false]}
}
],
"data": [
{
"name": "volcano",
"url": "https://vega.github.io/editor/data/volcano.json"
},
{
"name": "contours",
"source": "volcano",
"transform": [
{
"type": "isocontour",
"scale": {"expr": "width / datum.width"},
"smooth": {"signal": "smooth"},
"thresholds": {"signal": "sequence(90, 195, 5)"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"domain": [90, 190],
"range": {"scheme": "blueorange"}
}
],
"marks": [
{
"type": "path",
"from": {"data": "contours"},
"encode": {
"enter": {
"stroke": {"value": "#ccc"},
"strokeWidth": {"value": 1},
"fill": {"scale": "color", "field": "contour.value"}
}
},
"transform": [
{
"type": "geopath",
"field": "datum.contour"
}
]
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 500px;"></div>
</body>
</html>
Пример пчелиного роя VegaChart может рисовать диаграмму BeeSwarm, используя force
преобразование. ( оригинальный пример )
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 700px; height: 250px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 100, "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20}, "autosize": "none", "signals": [ { "name": "cx", "update": "width / 2" }, { "name": "cy", "update": "height / 2" }, { "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} }, { "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} }, { "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "static", "value": true, "bind": {"input": "checkbox"} } ], "data": [ { "name": "people", "url": "https://vega.github.io/editor/data/miserables.json", "format": {"type": "json", "property": "nodes"} } ], "scales": [ { "name": "xscale", "type": "band", "domain": { "data": "people", "field": "group", "sort": true }, "range": "width" }, { "name": "color", "type": "ordinal", "domain": {"data": "people", "field": "group"}, "range": {"scheme": "category20c"} } ], "axes": [ { "orient": "bottom", "scale": "xscale" } ], "marks": [ { "name": "nodes", "type": "symbol", "from": {"data": "people"}, "encode": { "enter": { "fill": {"scale": "color", "field": "group"}, "xfocus": {"scale": "xscale", "field": "group", "band": 0.5}, "yfocus": {"signal": "cy"} }, "update": { "size": {"signal": "pow(2 * radius, 2)"}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1}, "zindex": {"value": 0} }, "hover": { "stroke": {"value": "purple"}, "strokeWidth": {"value": 3}, "zindex": {"value": 1} } }, "transform": [ { "type": "force", "iterations": 300, "static": {"signal": "static"}, "forces": [ {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"{% verbatim %}}}{% endverbatim %}, {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"{% verbatim %}}}{% endverbatim %}, {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"{% verbatim %}}}{% endverbatim %} ] } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 700px; height: 250px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 100, "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20}, "autosize": "none", "signals": [ { "name": "cx", "update": "width / 2" }, { "name": "cy", "update": "height / 2" }, { "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} }, { "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} }, { "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "static", "value": true, "bind": {"input": "checkbox"} } ], "data": [ { "name": "people", "url": "https://vega.github.io/editor/data/miserables.json", "format": {"type": "json", "property": "nodes"} } ], "scales": [ { "name": "xscale", "type": "band", "domain": { "data": "people", "field": "group", "sort": true }, "range": "width" }, { "name": "color", "type": "ordinal", "domain": {"data": "people", "field": "group"}, "range": {"scheme": "category20c"} } ], "axes": [ { "orient": "bottom", "scale": "xscale" } ], "marks": [ { "name": "nodes", "type": "symbol", "from": {"data": "people"}, "encode": { "enter": { "fill": {"scale": "color", "field": "group"}, "xfocus": {"scale": "xscale", "field": "group", "band": 0.5}, "yfocus": {"signal": "cy"} }, "update": { "size": {"signal": "pow(2 * radius, 2)"}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1}, "zindex": {"value": 0} }, "hover": { "stroke": {"value": "purple"}, "strokeWidth": {"value": 3}, "zindex": {"value": 1} } }, "transform": [ { "type": "force", "iterations": 300, "static": {"signal": "static"}, "forces": [ {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"{% verbatim %}}}{% endverbatim %}, {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"{% verbatim %}}}{% endverbatim %}, {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"{% verbatim %}}}{% endverbatim %} ] } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 700px; height: 250px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 100, "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20}, "autosize": "none", "signals": [ { "name": "cx", "update": "width / 2" }, { "name": "cy", "update": "height / 2" }, { "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} }, { "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} }, { "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "static", "value": true, "bind": {"input": "checkbox"} } ], "data": [ { "name": "people", "url": "https://vega.github.io/editor/data/miserables.json", "format": {"type": "json", "property": "nodes"} } ], "scales": [ { "name": "xscale", "type": "band", "domain": { "data": "people", "field": "group", "sort": true }, "range": "width" }, { "name": "color", "type": "ordinal", "domain": {"data": "people", "field": "group"}, "range": {"scheme": "category20c"} } ], "axes": [ { "orient": "bottom", "scale": "xscale" } ], "marks": [ { "name": "nodes", "type": "symbol", "from": {"data": "people"}, "encode": { "enter": { "fill": {"scale": "color", "field": "group"}, "xfocus": {"scale": "xscale", "field": "group", "band": 0.5}, "yfocus": {"signal": "cy"} }, "update": { "size": {"signal": "pow(2 * radius, 2)"}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1}, "zindex": {"value": 0} }, "hover": { "stroke": {"value": "purple"}, "strokeWidth": {"value": 3}, "zindex": {"value": 1} } }, "transform": [ { "type": "force", "iterations": 300, "static": {"signal": "static"}, "forces": [ {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"{% verbatim %}}}{% endverbatim %}, {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"{% verbatim %}}}{% endverbatim %}, {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"{% verbatim %}}}{% endverbatim %} ] } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 700px; height: 250px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 100, "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20}, "autosize": "none", "signals": [ { "name": "cx", "update": "width / 2" }, { "name": "cy", "update": "height / 2" }, { "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} }, { "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} }, { "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "static", "value": true, "bind": {"input": "checkbox"} } ], "data": [ { "name": "people", "url": "https://vega.github.io/editor/data/miserables.json", "format": {"type": "json", "property": "nodes"} } ], "scales": [ { "name": "xscale", "type": "band", "domain": { "data": "people", "field": "group", "sort": true }, "range": "width" }, { "name": "color", "type": "ordinal", "domain": {"data": "people", "field": "group"}, "range": {"scheme": "category20c"} } ], "axes": [ { "orient": "bottom", "scale": "xscale" } ], "marks": [ { "name": "nodes", "type": "symbol", "from": {"data": "people"}, "encode": { "enter": { "fill": {"scale": "color", "field": "group"}, "xfocus": {"scale": "xscale", "field": "group", "band": 0.5}, "yfocus": {"signal": "cy"} }, "update": { "size": {"signal": "pow(2 * radius, 2)"}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1}, "zindex": {"value": 0} }, "hover": { "stroke": {"value": "purple"}, "strokeWidth": {"value": 3}, "zindex": {"value": 1} } }, "transform": [ { "type": "force", "iterations": 300, "static": {"signal": "static"}, "forces": [ {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"{% verbatim %}}}{% endverbatim %}, {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"{% verbatim %}}}{% endverbatim %}, {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"{% verbatim %}}}{% endverbatim %} ] } ] } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); }
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 600,
"height": 100,
"padding": {"left": 5, "right": 5, "top": 0, "bottom": 20},
"autosize": "none",
"signals": [
{ "name": "cx", "update": "width / 2" },
{ "name": "cy", "update": "height / 2" },
{ "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} },
{ "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} },
{ "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} },
{ "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} },
{ "name": "static", "value": true, "bind": {"input": "checkbox"} }
],
"data": [
{
"name": "people",
"url": "https://vega.github.io/editor/data/miserables.json",
"format": {"type": "json", "property": "nodes"}
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "people",
"field": "group",
"sort": true
},
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "people", "field": "group"},
"range": {"scheme": "category20c"}
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" }
],
"marks": [
{
"name": "nodes",
"type": "symbol",
"from": {"data": "people"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "group"},
"xfocus": {"scale": "xscale", "field": "group", "band": 0.5},
"yfocus": {"signal": "cy"}
},
"update": {
"size": {"signal": "pow(2 * radius, 2)"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1},
"zindex": {"value": 0}
},
"hover": {
"stroke": {"value": "purple"},
"strokeWidth": {"value": 3},
"zindex": {"value": 1}
}
},
"transform": [
{
"type": "force",
"iterations": 300,
"static": {"signal": "static"},
"forces": [
{"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"}},
{"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}},
{"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}}
]
}
]
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 700px; height: 250px;"></div>
</body>
</html>
Пример радиолокационной диаграммы VegaChart можно использовать для построения трех небольших радарных диаграмм. ( Оригинальный пример похожей радиолокационной диаграммы )
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-area"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts); const lasagna = [ ["Protein",0.1308,"Lasagna, cheese, frozen, prepared"], ["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"], ["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"], ["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"], ["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"], ["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"] ]; const pork = [ ["Protein",0.2638,"Pulled pork in barbecue sauce"], ["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"], ["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"], ["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"], ["Zinc",0.23125,"Pulled pork in barbecue sauce"], ["Sodium",0.444,"Pulled pork in barbecue sauce"] ]; const melon = [ ["Protein",0.0168,"Melons, cantaloupe, raw"], ["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"], ["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"], ["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"], ["Zinc",0.0225,"Melons, cantaloupe, raw"], ["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"] ]; function loadCharts() { addChart(lasagna[0][2], lasagna, "#B82E2E"); addChart(pork[0][2], pork, "#6633CC"); addChart(melon[0][2], melon, "#109618"); }; function addChart(title, data, color) { const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'key'}); dataTable.addColumn({type: 'number', 'id': 'value'}); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addRows(data); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 250, "height": 300, "autosize": "none", "title": { "text": title, "anchor": "middle", "fontSize": 14, "dy": -8, "dx": {"signal": "-width/4"}, "subtitle": "RDI per 100g" }, "signals": [ {"name": "radius", "update": "90"} ], "data": [ { "name": "table", "source": "datatable", }, { "name": "keys", "source": "table", "transform": [ { "type": "aggregate", "groupby": ["key"] } ] } ], "scales": [ { "name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5, "domain": {"data": "table", "field": "key"} }, { "name": "radial", "type": "linear", "range": {"signal": "[0, radius]"}, "zero": true, "nice": false, "domain": [0,0.5], } ], "encode": { "enter": { "x": {"signal": "width/2"}, "y": {"signal": "height/2 + 20"} } }, "marks": [ { "type": "group", "name": "categories", "zindex": 1, "from": { "facet": {"data": "table", "name": "facet", "groupby": ["category"]} }, "marks": [ { "type": "line", "name": "category-line", "from": {"data": "facet"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"}, "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"}, "stroke": {"value": color}, "strokeWidth": {"value": 1.5}, "fill": {"value": color}, "fillOpacity": {"value": 0.1} } } }, { "type": "text", "name": "value-text", "from": {"data": "category-line"}, "encode": { "enter": { "x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"}, "y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"}, "text": {"signal": "format(datum.datum.value,'.1%')"}, "opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"}, "align": {"value": "center"}, "baseline": {"value": "middle"}, "fontWeight": {"value": "bold"}, "fill": {"value": color}, } } } ] }, { "type": "rule", "name": "radial-grid", "from": {"data": "keys"}, "zindex": 0, "encode": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "x2": {"signal": "radius * cos(scale('angular', datum.key))"}, "y2": {"signal": "radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "text", "name": "key-label", "from": {"data": "keys"}, "zindex": 1, "encode": { "enter": { "x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"}, "y": [ { "test": "sin(scale('angular', datum.key)) > 0", "signal": "5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "test": "sin(scale('angular', datum.key)) < 0", "signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "signal": "(radius + 11) * sin(scale('angular', datum.key))" } ], "text": {"field": "key"}, "align": { "value": "center" }, "baseline": [ { "test": "scale('angular', datum.key) > 0", "value": "top" }, { "test": "scale('angular', datum.key) == 0", "value": "middle" }, { "value": "bottom" } ], "fill": {"value": "black"}, "fontSize": {"value": 12} } } }, { "type": "line", "name": "twenty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "fourty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "sixty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "eighty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "outer-line", "from": {"data": "radial-grid"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"field": "x2"}, "y": {"field": "y2"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } } ] } }; const elem = document.createElement("div"); elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;"); const chart = new google.visualization.VegaChart(elem); chart.draw(dataTable, options); document.getElementById("chart-area").appendChild(elem); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-area"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts); const lasagna = [ ["Protein",0.1308,"Lasagna, cheese, frozen, prepared"], ["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"], ["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"], ["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"], ["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"], ["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"] ]; const pork = [ ["Protein",0.2638,"Pulled pork in barbecue sauce"], ["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"], ["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"], ["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"], ["Zinc",0.23125,"Pulled pork in barbecue sauce"], ["Sodium",0.444,"Pulled pork in barbecue sauce"] ]; const melon = [ ["Protein",0.0168,"Melons, cantaloupe, raw"], ["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"], ["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"], ["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"], ["Zinc",0.0225,"Melons, cantaloupe, raw"], ["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"] ]; function loadCharts() { addChart(lasagna[0][2], lasagna, "#B82E2E"); addChart(pork[0][2], pork, "#6633CC"); addChart(melon[0][2], melon, "#109618"); }; function addChart(title, data, color) { const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'key'}); dataTable.addColumn({type: 'number', 'id': 'value'}); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addRows(data); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 250, "height": 300, "autosize": "none", "title": { "text": title, "anchor": "middle", "fontSize": 14, "dy": -8, "dx": {"signal": "-width/4"}, "subtitle": "RDI per 100g" }, "signals": [ {"name": "radius", "update": "90"} ], "data": [ { "name": "table", "source": "datatable", }, { "name": "keys", "source": "table", "transform": [ { "type": "aggregate", "groupby": ["key"] } ] } ], "scales": [ { "name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5, "domain": {"data": "table", "field": "key"} }, { "name": "radial", "type": "linear", "range": {"signal": "[0, radius]"}, "zero": true, "nice": false, "domain": [0,0.5], } ], "encode": { "enter": { "x": {"signal": "width/2"}, "y": {"signal": "height/2 + 20"} } }, "marks": [ { "type": "group", "name": "categories", "zindex": 1, "from": { "facet": {"data": "table", "name": "facet", "groupby": ["category"]} }, "marks": [ { "type": "line", "name": "category-line", "from": {"data": "facet"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"}, "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"}, "stroke": {"value": color}, "strokeWidth": {"value": 1.5}, "fill": {"value": color}, "fillOpacity": {"value": 0.1} } } }, { "type": "text", "name": "value-text", "from": {"data": "category-line"}, "encode": { "enter": { "x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"}, "y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"}, "text": {"signal": "format(datum.datum.value,'.1%')"}, "opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"}, "align": {"value": "center"}, "baseline": {"value": "middle"}, "fontWeight": {"value": "bold"}, "fill": {"value": color}, } } } ] }, { "type": "rule", "name": "radial-grid", "from": {"data": "keys"}, "zindex": 0, "encode": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "x2": {"signal": "radius * cos(scale('angular', datum.key))"}, "y2": {"signal": "radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "text", "name": "key-label", "from": {"data": "keys"}, "zindex": 1, "encode": { "enter": { "x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"}, "y": [ { "test": "sin(scale('angular', datum.key)) > 0", "signal": "5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "test": "sin(scale('angular', datum.key)) < 0", "signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "signal": "(radius + 11) * sin(scale('angular', datum.key))" } ], "text": {"field": "key"}, "align": { "value": "center" }, "baseline": [ { "test": "scale('angular', datum.key) > 0", "value": "top" }, { "test": "scale('angular', datum.key) == 0", "value": "middle" }, { "value": "bottom" } ], "fill": {"value": "black"}, "fontSize": {"value": 12} } } }, { "type": "line", "name": "twenty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "fourty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "sixty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "eighty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "outer-line", "from": {"data": "radial-grid"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"field": "x2"}, "y": {"field": "y2"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } } ] } }; const elem = document.createElement("div"); elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;"); const chart = new google.visualization.VegaChart(elem); chart.draw(dataTable, options); document.getElementById("chart-area").appendChild(elem); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-area"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts); const lasagna = [ ["Protein",0.1308,"Lasagna, cheese, frozen, prepared"], ["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"], ["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"], ["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"], ["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"], ["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"] ]; const pork = [ ["Protein",0.2638,"Pulled pork in barbecue sauce"], ["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"], ["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"], ["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"], ["Zinc",0.23125,"Pulled pork in barbecue sauce"], ["Sodium",0.444,"Pulled pork in barbecue sauce"] ]; const melon = [ ["Protein",0.0168,"Melons, cantaloupe, raw"], ["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"], ["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"], ["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"], ["Zinc",0.0225,"Melons, cantaloupe, raw"], ["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"] ]; function loadCharts() { addChart(lasagna[0][2], lasagna, "#B82E2E"); addChart(pork[0][2], pork, "#6633CC"); addChart(melon[0][2], melon, "#109618"); }; function addChart(title, data, color) { const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'key'}); dataTable.addColumn({type: 'number', 'id': 'value'}); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addRows(data); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 250, "height": 300, "autosize": "none", "title": { "text": title, "anchor": "middle", "fontSize": 14, "dy": -8, "dx": {"signal": "-width/4"}, "subtitle": "RDI per 100g" }, "signals": [ {"name": "radius", "update": "90"} ], "data": [ { "name": "table", "source": "datatable", }, { "name": "keys", "source": "table", "transform": [ { "type": "aggregate", "groupby": ["key"] } ] } ], "scales": [ { "name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5, "domain": {"data": "table", "field": "key"} }, { "name": "radial", "type": "linear", "range": {"signal": "[0, radius]"}, "zero": true, "nice": false, "domain": [0,0.5], } ], "encode": { "enter": { "x": {"signal": "width/2"}, "y": {"signal": "height/2 + 20"} } }, "marks": [ { "type": "group", "name": "categories", "zindex": 1, "from": { "facet": {"data": "table", "name": "facet", "groupby": ["category"]} }, "marks": [ { "type": "line", "name": "category-line", "from": {"data": "facet"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"}, "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"}, "stroke": {"value": color}, "strokeWidth": {"value": 1.5}, "fill": {"value": color}, "fillOpacity": {"value": 0.1} } } }, { "type": "text", "name": "value-text", "from": {"data": "category-line"}, "encode": { "enter": { "x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"}, "y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"}, "text": {"signal": "format(datum.datum.value,'.1%')"}, "opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"}, "align": {"value": "center"}, "baseline": {"value": "middle"}, "fontWeight": {"value": "bold"}, "fill": {"value": color}, } } } ] }, { "type": "rule", "name": "radial-grid", "from": {"data": "keys"}, "zindex": 0, "encode": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "x2": {"signal": "radius * cos(scale('angular', datum.key))"}, "y2": {"signal": "radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "text", "name": "key-label", "from": {"data": "keys"}, "zindex": 1, "encode": { "enter": { "x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"}, "y": [ { "test": "sin(scale('angular', datum.key)) > 0", "signal": "5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "test": "sin(scale('angular', datum.key)) < 0", "signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "signal": "(radius + 11) * sin(scale('angular', datum.key))" } ], "text": {"field": "key"}, "align": { "value": "center" }, "baseline": [ { "test": "scale('angular', datum.key) > 0", "value": "top" }, { "test": "scale('angular', datum.key) == 0", "value": "middle" }, { "value": "bottom" } ], "fill": {"value": "black"}, "fontSize": {"value": 12} } } }, { "type": "line", "name": "twenty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "fourty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "sixty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "eighty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "outer-line", "from": {"data": "radial-grid"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"field": "x2"}, "y": {"field": "y2"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } } ] } }; const elem = document.createElement("div"); elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;"); const chart = new google.visualization.VegaChart(elem); chart.draw(dataTable, options); document.getElementById("chart-area").appendChild(elem); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-area"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts); const lasagna = [ ["Protein",0.1308,"Lasagna, cheese, frozen, prepared"], ["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"], ["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"], ["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"], ["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"], ["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"] ]; const pork = [ ["Protein",0.2638,"Pulled pork in barbecue sauce"], ["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"], ["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"], ["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"], ["Zinc",0.23125,"Pulled pork in barbecue sauce"], ["Sodium",0.444,"Pulled pork in barbecue sauce"] ]; const melon = [ ["Protein",0.0168,"Melons, cantaloupe, raw"], ["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"], ["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"], ["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"], ["Zinc",0.0225,"Melons, cantaloupe, raw"], ["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"] ]; function loadCharts() { addChart(lasagna[0][2], lasagna, "#B82E2E"); addChart(pork[0][2], pork, "#6633CC"); addChart(melon[0][2], melon, "#109618"); }; function addChart(title, data, color) { const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'key'}); dataTable.addColumn({type: 'number', 'id': 'value'}); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addRows(data); const options = { 'vega': { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 250, "height": 300, "autosize": "none", "title": { "text": title, "anchor": "middle", "fontSize": 14, "dy": -8, "dx": {"signal": "-width/4"}, "subtitle": "RDI per 100g" }, "signals": [ {"name": "radius", "update": "90"} ], "data": [ { "name": "table", "source": "datatable", }, { "name": "keys", "source": "table", "transform": [ { "type": "aggregate", "groupby": ["key"] } ] } ], "scales": [ { "name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5, "domain": {"data": "table", "field": "key"} }, { "name": "radial", "type": "linear", "range": {"signal": "[0, radius]"}, "zero": true, "nice": false, "domain": [0,0.5], } ], "encode": { "enter": { "x": {"signal": "width/2"}, "y": {"signal": "height/2 + 20"} } }, "marks": [ { "type": "group", "name": "categories", "zindex": 1, "from": { "facet": {"data": "table", "name": "facet", "groupby": ["category"]} }, "marks": [ { "type": "line", "name": "category-line", "from": {"data": "facet"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"}, "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"}, "stroke": {"value": color}, "strokeWidth": {"value": 1.5}, "fill": {"value": color}, "fillOpacity": {"value": 0.1} } } }, { "type": "text", "name": "value-text", "from": {"data": "category-line"}, "encode": { "enter": { "x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"}, "y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"}, "text": {"signal": "format(datum.datum.value,'.1%')"}, "opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"}, "align": {"value": "center"}, "baseline": {"value": "middle"}, "fontWeight": {"value": "bold"}, "fill": {"value": color}, } } } ] }, { "type": "rule", "name": "radial-grid", "from": {"data": "keys"}, "zindex": 0, "encode": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "x2": {"signal": "radius * cos(scale('angular', datum.key))"}, "y2": {"signal": "radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "text", "name": "key-label", "from": {"data": "keys"}, "zindex": 1, "encode": { "enter": { "x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"}, "y": [ { "test": "sin(scale('angular', datum.key)) > 0", "signal": "5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "test": "sin(scale('angular', datum.key)) < 0", "signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))" }, { "signal": "(radius + 11) * sin(scale('angular', datum.key))" } ], "text": {"field": "key"}, "align": { "value": "center" }, "baseline": [ { "test": "scale('angular', datum.key) > 0", "value": "top" }, { "test": "scale('angular', datum.key) == 0", "value": "middle" }, { "value": "bottom" } ], "fill": {"value": "black"}, "fontSize": {"value": 12} } } }, { "type": "line", "name": "twenty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "fourty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "sixty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "eighty-line", "from": {"data": "keys"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"}, "y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "line", "name": "outer-line", "from": {"data": "radial-grid"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"field": "x2"}, "y": {"field": "y2"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } } ] } }; const elem = document.createElement("div"); elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;"); const chart = new google.visualization.VegaChart(elem); chart.draw(dataTable, options); document.getElementById("chart-area").appendChild(elem); }
<html>
<head>
<title>Radar Chart Small Multiples</title>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts);
const lasagna = [
["Protein",0.1308,"Lasagna, cheese, frozen, prepared"],
["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"],
["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"],
["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"],
["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"],
["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"]
];
const pork = [
["Protein",0.2638,"Pulled pork in barbecue sauce"],
["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"],
["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"],
["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"],
["Zinc",0.23125,"Pulled pork in barbecue sauce"],
["Sodium",0.444,"Pulled pork in barbecue sauce"]
];
const melon = [
["Protein",0.0168,"Melons, cantaloupe, raw"],
["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"],
["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"],
["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"],
["Zinc",0.0225,"Melons, cantaloupe, raw"],
["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"]
];
function loadCharts() {
addChart(lasagna[0][2], lasagna, "#B82E2E");
addChart(pork[0][2], pork, "#6633CC");
addChart(melon[0][2], melon, "#109618");
};
function addChart(title, data, color) {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'key'});
dataTable.addColumn({type: 'number', 'id': 'value'});
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addRows(data);
const options = {
'vega': {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 250,
"height": 300,
"autosize": "none",
"title": {
"text": title,
"anchor": "middle",
"fontSize": 14,
"dy": -8,
"dx": {"signal": "-width/4"},
"subtitle": "RDI per 100g"
},
"signals": [
{"name": "radius", "update": "90"}
],
"data": [
{
"name": "table",
"source": "datatable",
},
{
"name": "keys",
"source": "table",
"transform": [
{
"type": "aggregate",
"groupby": ["key"]
}
]
}
],
"scales": [
{
"name": "angular",
"type": "point",
"range": {"signal": "[-PI, PI]"},
"padding": 0.5,
"domain": {"data": "table", "field": "key"}
},
{
"name": "radial",
"type": "linear",
"range": {"signal": "[0, radius]"},
"zero": true,
"nice": false,
"domain": [0,0.5],
}
],
"encode": {
"enter": {
"x": {"signal": "width/2"},
"y": {"signal": "height/2 + 20"}
}
},
"marks": [
{
"type": "group",
"name": "categories",
"zindex": 1,
"from": {
"facet": {"data": "table", "name": "facet", "groupby": ["category"]}
},
"marks": [
{
"type": "line",
"name": "category-line",
"from": {"data": "facet"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"},
"y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"},
"stroke": {"value": color},
"strokeWidth": {"value": 1.5},
"fill": {"value": color},
"fillOpacity": {"value": 0.1}
}
}
},
{
"type": "text",
"name": "value-text",
"from": {"data": "category-line"},
"encode": {
"enter": {
"x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"},
"y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"},
"text": {"signal": "format(datum.datum.value,'.1%')"},
"opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontWeight": {"value": "bold"},
"fill": {"value": color},
}
}
}
]
},
{
"type": "rule",
"name": "radial-grid",
"from": {"data": "keys"},
"zindex": 0,
"encode": {
"enter": {
"x": {"value": 0},
"y": {"value": 0},
"x2": {"signal": "radius * cos(scale('angular', datum.key))"},
"y2": {"signal": "radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "text",
"name": "key-label",
"from": {"data": "keys"},
"zindex": 1,
"encode": {
"enter": {
"x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"},
"y": [
{
"test": "sin(scale('angular', datum.key)) > 0",
"signal": "5 + (radius + 11) * sin(scale('angular', datum.key))"
},
{
"test": "sin(scale('angular', datum.key)) < 0",
"signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))"
},
{
"signal": "(radius + 11) * sin(scale('angular', datum.key))"
}
],
"text": {"field": "key"},
"align":
{
"value": "center"
},
"baseline": [
{
"test": "scale('angular', datum.key) > 0", "value": "top"
},
{
"test": "scale('angular', datum.key) == 0", "value": "middle"
},
{
"value": "bottom"
}
],
"fill": {"value": "black"},
"fontSize": {"value": 12}
}
}
},
{
"type": "line",
"name": "twenty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "fourty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "sixty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "eighty-line",
"from": {"data": "keys"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"},
"y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
},
{
"type": "line",
"name": "outer-line",
"from": {"data": "radial-grid"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"field": "x2"},
"y": {"field": "y2"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
}
]
}
};
const elem = document.createElement("div");
elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;");
const chart = new google.visualization.VegaChart(elem);
chart.draw(dataTable, options);
document.getElementById("chart-area").appendChild(elem);
}
</script>
</head>
<body>
<div id="chart-area"></div>
</body>
</html>
Примеры VegaChart с Vega-Lite Тепловая карта с примером маргинальных гистограмм VegaChart может рисовать тепловую карту с гистограммами по каждой оси. ( Исходный пример: предельные гистограммы )
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": "https://vega.github.io/vega/data/movies.json"}, "spacing": 15, "bounds": "flush", "vconcat": [{ "mark": "bar", "height": 60, "encoding": { "x": { "bin": true, "field": "IMDB Rating", "axis": null }, "y": { "aggregate": "count", "scale": { "domain": [0,1000] }, "title": "" } } }, { "spacing": 15, "bounds": "flush", "hconcat": [{ "mark": "rect", "encoding": { "x": {"bin": true, "field": "IMDB Rating"}, "y": {"bin": true, "field": "Rotten Tomatoes Rating"}, "color": {"aggregate": "count"} } }, { "mark": "bar", "width": 60, "encoding": { "y": { "bin": true, "field": "Rotten Tomatoes Rating", "axis": null }, "x": { "aggregate": "count", "scale": {"domain": [0,1000]}, "title": "" } } }] }], "config": { "view": { "stroke": "transparent" } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": "https://vega.github.io/vega/data/movies.json"}, "spacing": 15, "bounds": "flush", "vconcat": [{ "mark": "bar", "height": 60, "encoding": { "x": { "bin": true, "field": "IMDB Rating", "axis": null }, "y": { "aggregate": "count", "scale": { "domain": [0,1000] }, "title": "" } } }, { "spacing": 15, "bounds": "flush", "hconcat": [{ "mark": "rect", "encoding": { "x": {"bin": true, "field": "IMDB Rating"}, "y": {"bin": true, "field": "Rotten Tomatoes Rating"}, "color": {"aggregate": "count"} } }, { "mark": "bar", "width": 60, "encoding": { "y": { "bin": true, "field": "Rotten Tomatoes Rating", "axis": null }, "x": { "aggregate": "count", "scale": {"domain": [0,1000]}, "title": "" } } }] }], "config": { "view": { "stroke": "transparent" } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": "https://vega.github.io/vega/data/movies.json"}, "spacing": 15, "bounds": "flush", "vconcat": [{ "mark": "bar", "height": 60, "encoding": { "x": { "bin": true, "field": "IMDB Rating", "axis": null }, "y": { "aggregate": "count", "scale": { "domain": [0,1000] }, "title": "" } } }, { "spacing": 15, "bounds": "flush", "hconcat": [{ "mark": "rect", "encoding": { "x": {"bin": true, "field": "IMDB Rating"}, "y": {"bin": true, "field": "Rotten Tomatoes Rating"}, "color": {"aggregate": "count"} } }, { "mark": "bar", "width": 60, "encoding": { "y": { "bin": true, "field": "Rotten Tomatoes Rating", "axis": null }, "x": { "aggregate": "count", "scale": {"domain": [0,1000]}, "title": "" } } }] }], "config": { "view": { "stroke": "transparent" } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": "https://vega.github.io/vega/data/movies.json"}, "spacing": 15, "bounds": "flush", "vconcat": [{ "mark": "bar", "height": 60, "encoding": { "x": { "bin": true, "field": "IMDB Rating", "axis": null }, "y": { "aggregate": "count", "scale": { "domain": [0,1000] }, "title": "" } } }, { "spacing": 15, "bounds": "flush", "hconcat": [{ "mark": "rect", "encoding": { "x": {"bin": true, "field": "IMDB Rating"}, "y": {"bin": true, "field": "Rotten Tomatoes Rating"}, "color": {"aggregate": "count"} } }, { "mark": "bar", "width": 60, "encoding": { "y": { "bin": true, "field": "Rotten Tomatoes Rating", "axis": null }, "x": { "aggregate": "count", "scale": {"domain": [0,1000]}, "title": "" } } }] }], "config": { "view": { "stroke": "transparent" } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); }
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vegaLite': {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/vega/data/movies.json"},
"spacing": 15,
"bounds": "flush",
"vconcat": [{
"mark": "bar",
"height": 60,
"encoding": {
"x": {
"bin": true,
"field": "IMDB Rating",
"axis": null
},
"y": {
"aggregate": "count",
"scale": {
"domain": [0,1000]
},
"title": ""
}
}
}, {
"spacing": 15,
"bounds": "flush",
"hconcat": [{
"mark": "rect",
"encoding": {
"x": {"bin": true, "field": "IMDB Rating"},
"y": {"bin": true, "field": "Rotten Tomatoes Rating"},
"color": {"aggregate": "count"}
}
}, {
"mark": "bar",
"width": 60,
"encoding": {
"y": {
"bin": true,
"field": "Rotten Tomatoes Rating",
"axis": null
},
"x": {
"aggregate": "count",
"scale": {"domain": [0,1000]},
"title": ""
}
}
}]
}],
"config": {
"view": {
"stroke": "transparent"
}
}
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div"></div>
</body>
</html>
Пример генератора последовательности VegaChart может генерировать данные с помощью генератора последовательностей. ( Исходный пример: рисование синусоидальных и косинусоидальных кривых с помощью генератора последовательности )
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 300px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "Plots two functions using a generated sequence.", "width": 300, "height": 150, "data": { "sequence": { "start": 0, "stop": 12.7, "step": 0.1, "as": "x" } }, "transform": [ { "calculate": "sin(datum.x)", "as": "sin(x)" }, { "calculate": "cos(datum.x)", "as": "cos(x)" }, { "fold": ["sin(x)", "cos(x)"] } ], "mark": "line", "encoding": { "x": { "type": "quantitative", "field": "x" }, "y": { "field": "value", "type": "quantitative" }, "color": { "field": "key", "type": "nominal", "title": null } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 300px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "Plots two functions using a generated sequence.", "width": 300, "height": 150, "data": { "sequence": { "start": 0, "stop": 12.7, "step": 0.1, "as": "x" } }, "transform": [ { "calculate": "sin(datum.x)", "as": "sin(x)" }, { "calculate": "cos(datum.x)", "as": "cos(x)" }, { "fold": ["sin(x)", "cos(x)"] } ], "mark": "line", "encoding": { "x": { "type": "quantitative", "field": "x" }, "y": { "field": "value", "type": "quantitative" }, "color": { "field": "key", "type": "nominal", "title": null } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 300px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "Plots two functions using a generated sequence.", "width": 300, "height": 150, "data": { "sequence": { "start": 0, "stop": 12.7, "step": 0.1, "as": "x" } }, "transform": [ { "calculate": "sin(datum.x)", "as": "sin(x)" }, { "calculate": "cos(datum.x)", "as": "cos(x)" }, { "fold": ["sin(x)", "cos(x)"] } ], "mark": "line", "encoding": { "x": { "type": "quantitative", "field": "x" }, "y": { "field": "value", "type": "quantitative" }, "color": { "field": "key", "type": "nominal", "title": null } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 300px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "Plots two functions using a generated sequence.", "width": 300, "height": 150, "data": { "sequence": { "start": 0, "stop": 12.7, "step": 0.1, "as": "x" } }, "transform": [ { "calculate": "sin(datum.x)", "as": "sin(x)" }, { "calculate": "cos(datum.x)", "as": "cos(x)" }, { "fold": ["sin(x)", "cos(x)"] } ], "mark": "line", "encoding": { "x": { "type": "quantitative", "field": "x" }, "y": { "field": "value", "type": "quantitative" }, "color": { "field": "key", "type": "nominal", "title": null } } } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); }
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vegaLite': {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"fold": ["sin(x)", "cos(x)"]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 300px;"></div>
</body>
</html>
Пример радиального графика VegaChart может использовать угловую и радиальную протяженность для отображения нескольких измерений данных на радиальном графике. ( Исходный пример: радиальный график )
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "A simple radial chart with embedded data.", "data": { "values": [12, 23, 47, 6, 52, 19] }, "layer": [ { "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"} }, { "mark": {"type": "text", "radiusOffset": 10}, "encoding": { "text": {"field": "data", "type": "quantitative"} } }], "encoding": { "theta": {"field": "data", "type": "quantitative", "stack": true}, "radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20{% verbatim %}}}{% endverbatim %}, "color": {"field": "data", "type": "nominal", "legend": null} }, "view": {"stroke": null} } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "A simple radial chart with embedded data.", "data": { "values": [12, 23, 47, 6, 52, 19] }, "layer": [ { "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"} }, { "mark": {"type": "text", "radiusOffset": 10}, "encoding": { "text": {"field": "data", "type": "quantitative"} } }], "encoding": { "theta": {"field": "data", "type": "quantitative", "stack": true}, "radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20{% verbatim %}}}{% endverbatim %}, "color": {"field": "data", "type": "nominal", "legend": null} }, "view": {"stroke": null} } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "A simple radial chart with embedded data.", "data": { "values": [12, 23, 47, 6, 52, 19] }, "layer": [ { "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"} }, { "mark": {"type": "text", "radiusOffset": 10}, "encoding": { "text": {"field": "data", "type": "quantitative"} } }], "encoding": { "theta": {"field": "data", "type": "quantitative", "stack": true}, "radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20{% verbatim %}}}{% endverbatim %}, "color": {"field": "data", "type": "nominal", "legend": null} }, "view": {"stroke": null} } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-div" style="width: 500px; height: 500px;"></div> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { // A DataTable is required, but it can be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vegaLite': { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "A simple radial chart with embedded data.", "data": { "values": [12, 23, 47, 6, 52, 19] }, "layer": [ { "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"} }, { "mark": {"type": "text", "radiusOffset": 10}, "encoding": { "text": {"field": "data", "type": "quantitative"} } }], "encoding": { "theta": {"field": "data", "type": "quantitative", "stack": true}, "radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20{% verbatim %}}}{% endverbatim %}, "color": {"field": "data", "type": "nominal", "legend": null} }, "view": {"stroke": null} } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); }
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
// A DataTable is required, but it can be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vegaLite': {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple radial chart with embedded data.",
"data": {
"values": [12, 23, 47, 6, 52, 19]
},
"layer": [
{
"mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"}
},
{
"mark": {"type": "text", "radiusOffset": 10},
"encoding": {
"text": {"field": "data", "type": "quantitative"}
}
}],
"encoding": {
"theta": {"field": "data", "type": "quantitative", "stack": true},
"radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}},
"color": {"field": "data", "type": "nominal", "legend": null}
},
"view": {"stroke": null}
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 500px; height: 500px;"></div>
</body>
</html>