<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>f
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@latest"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
const handler = new vegaTooltip.Handler()
const yourVlSpec = {
$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: 'ordinal' },
y: { field: 'b', type: 'quantitative' },
},
}
vegaEmbed('#vis', yourVlSpec, {
tooltip: handler.call,
mode: 'vega-lite',
config: {
mark: {
tooltip: true,
},
},
})
</script>
</body>
</html>
반응형
'lang > js' 카테고리의 다른 글
| window.performance.navigation.type vs PerformanceNavigationTiming.type (0) | 2022.07.07 |
|---|---|
| Javascript Promise (0) | 2021.01.04 |
| Element.scrollIntoView() (0) | 2020.11.06 |
| JavascriptHTMLDialogElement.returnValue (0) | 2019.12.19 |
| Javascript EventTarget() (0) | 2019.12.18 |