Getting Vega-Lite / D3 to Work in Nuxt.js
Question
I'm trying to get a simple Vega-Lite visualization to work in Nuxt and struggling. Here's Vega-Lite's documentation on how to embed a simple chart into an HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.10.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.5.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
description: 'A simple bar chart with embedded data.',
data: {
values: [
{a: 'A', b: 28},
{a: 'B', b: 55},
{a: 'C', b: 43},
{a: 'D', b: 91},
{a: 'E', b: 81},
{a: 'F', b: 53},
{a: 'G', b: 19},
{a: 'H', b: 87},
{a: 'I', b: 52}
]
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal'},
y: {field: 'b', type: 'quantitative'}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
How would I get that syntax to work in Nuxt?
I tried this:
<template>
<div>
<div id="vis"></div>
</div>
</template>
<script>
import vegaEmbed from 'vega-embed'
export default {
data() {
return {
chart1: {
$schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
description: 'A simple bar chart with embedded data.',
data: {
values: [
{a: 'A', b: 28},
{a: 'B', b: 55},
{a: 'C', b: 43},
{a: 'D', b: 91},
{a: 'E', b: 81},
{a: 'F', b: 53},
{a: 'G', b: 19},
{a: 'H', b: 87},
{a: 'I', b: 52}
]
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal'},
y: {field: 'b', type: 'quantitative'}
}
}
}
},
methods: {
async draw(){
let yourV1Spec = JSON.parse(this.chart1)
await vegaEmbed('#vis', yourVlSpec);
}
},
}
</script>
I'm clearly doing something wrong because it doesn't work. At least I know the data part is working right, though. It's the vegaEmbed part that I can't figure out.
Thus far, the only way I can get this to work properly is if I do the Vega visualization in a separate.js file and import it in my.vue file.
import vegaEmbed from 'vega-embed';
var yourV1Spec = {
{
$schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
description: 'A simple bar chart with embedded data.',
data: {
values: [
{a: 'A', b: 28},
{a: 'B', b: 55},
{a: 'C', b: 43},
{a: 'D', b: 91},
{a: 'E', b: 81},
{a: 'F', b: 53},
{a: 'G', b: 19},
{a: 'H', b: 87},
{a: 'I', b: 52}
]
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal'},
y: {field: 'b', type: 'quantitative'}
}
};
// Embed the visualization in the container with id `vis`
vegaEmbed('#vis', yourVlSpec);
But how would I do this in a more proper Vue / Nuxt type style and get it to work?
2 answers
solution1
0 2020-11-25 02:36:17
In your failing example, you are passing a JavaScript object ( this.chart1 ) into JSON.parse , which expects a string. Did you see any hints in the javascript error console?
Perhaps it would work if you simply called await vegaEmbed('#vis', this.chart1);
Additionally, it doesn't look like your draw method gets called anywhere. You may want to put that code inside of something like the mounted life-cycle hook, so that the vega-embed code runs once the component has been rendered.
solution2
0 2022-11-16 13:10:00
It works like this in Nuxt with SSR set to false.
<template>
<div id="vis"></div>
</template>
<script>
import embed from 'vega-embed'
export default {
name: 'BarChart',
mounted() {
this.draw()
},
data() {
return {
chart1: {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'A simple bar chart with embedded data.',
data: {
values: [
{ a: 'A', b: 28 },
{ a: 'B', b: 55 },
{ a: 'C', b: 43 },
{ a: 'D', b: 91 },
{ a: 'E', b: 81 },
{ a: 'F', b: 53 },
{ a: 'G', b: 19 },
{ a: 'H', b: 87 },
{ a: 'I', b: 52 },
],
},
mark: 'bar',
encoding: {
x: { field: 'a', type: 'nominal', axis: { labelAngle: 0 } },
y: { field: 'b', type: 'quantitative' },
},
},
}
},
methods: {
async draw() {
const result = await embed('#vis', this.chart1)
},
},
}
</script>
Yet, when SSR is set to true, it returns:
SyntaxError
Unexpected token '??='
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.