英文:
How to use multiple marks in vega-lite whem embedded into HTML?
问题
我想要将一个Vega-Lite图表嵌入到HTML页面中。它应该绘制一个带有额外点符号的折线图。然而,当它嵌入到HTML中时,似乎Vega-Lite用于多个层次的代码不起作用。
我的代码看起来像下面显示的那样。当我尝试添加层次,就像这里,或者尝试在一个括号内组合两个标记,就像这里,它不起作用。我确信是由于HTML嵌入,但我无法从文档中找出原因。
谢谢你的建议。
<!DOCTYPE html>
<html>
<head>
<title>嵌入Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.1"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: 300,
height: 200,
padding: 5,
title: "MMRM显示的折线图",
description: '一个带有嵌入数据的简单折线图。',
data: {
values: [
{Time: 1, AVAL: 28, Treatment:'Placebo'},
{Time: 2, AVAL: 55, Treatment:'Placebo'},
{Time: 3, AVAL: 43, Treatment:'Placebo'},
{Time: 4, AVAL: 67, Treatment:'Placebo'},
{Time: 5, AVAL: 56, Treatment:'Placebo'},
{Time: 6, AVAL: 53, Treatment:'Placebo'},
{Time: 7, AVAL: 19, Treatment:'Placebo'},
{Time: 8, AVAL: 43, Treatment:'Placebo'},
{Time: 9, AVAL: 52, Treatment:'Placebo'},
{Time: 1, AVAL: 48, Treatment:'Intervention'},
{Time: 2, AVAL: 65, Treatment:'Intervention'},
{Time: 3, AVAL: 73, Treatment:'Intervention'},
{Time: 4, AVAL: 91, Treatment:'Intervention'},
{Time: 5, AVAL: 81, Treatment:'Intervention'},
{Time: 6, AVAL: 83, Treatment:'Intervention'},
{Time: 7, AVAL: 89, Treatment:'Intervention'},
{Time: 8, AVAL: 87, Treatment:'Intervention'},
{Time: 9, AVAL: 82, Treatment:'Intervention'}
]
},
mark: 'line' ,
encoding: {
x: {field: 'Time', type: 'quantitative'},
y: {field: 'AVAL', type: 'quantitative'},
color: {"field": "Treatment", "type": "nominal"}
}
}
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
英文:
I want to embed a vega-lite chart into a html page. It should draw a line chart with additional point symbols. However, it seems that the vega-lite code for multiple layers does not work when it is embedded in HTML.
My code that is working looks like the one displayed below. When I try to add layers like HERE, or try to combine two marks within one bracket like HERE it does not work. I am sure it is due to the HTML embedding but I cannot figure out from the documentation why it does not work.
Thank you for your ideas.
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.1"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: 300,
height: 200,
padding: 5,
title: "Line chart of MMRM display",
description: 'A simple line chart with embedded data.',
data: {
values: [
{Time: 1, AVAL: 28, Treatment:'Placebo'},
{Time: 2, AVAL: 55, Treatment:'Placebo'},
{Time: 3, AVAL: 43, Treatment:'Placebo'},
{Time: 4, AVAL: 67, Treatment:'Placebo'},
{Time: 5, AVAL: 56, Treatment:'Placebo'},
{Time: 6, AVAL: 53, Treatment:'Placebo'},
{Time: 7, AVAL: 19, Treatment:'Placebo'},
{Time: 8, AVAL: 43, Treatment:'Placebo'},
{Time: 9, AVAL: 52, Treatment:'Placebo'},
{Time: 1, AVAL: 48, Treatment:'Intervention'},
{Time: 2, AVAL: 65, Treatment:'Intervention'},
{Time: 3, AVAL: 73, Treatment:'Intervention'},
{Time: 4, AVAL: 91, Treatment:'Intervention'},
{Time: 5, AVAL: 81, Treatment:'Intervention'},
{Time: 6, AVAL: 83, Treatment:'Intervention'},
{Time: 7, AVAL: 89, Treatment:'Intervention'},
{Time: 8, AVAL: 87, Treatment:'Intervention'},
{Time: 9, AVAL: 82, Treatment:'Intervention'}
]
},
mark: 'line' ,
encoding: {
x: {field: 'Time', type: 'quantitative'},
y: {field: 'AVAL', type: 'quantitative'},
color: {"field": "Treatment", "type": "nominal"}
}
}
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
答案1
得分: 1
以下是您要翻译的内容:
"Thanks to the comment of David, I was able to track the error using the vega-lite online editor. The trick was to write a part for mark combining point and line descriptions. The encoding goes into a second code block. The working example (data is just imaginary) can be found below."
感谢David的评论,我能够使用vega-lite在线编辑器追踪错误。诀窍是编写一个将点和线描述组合在一起的标记部分。编码放入第二个代码块。下面是一个可工作的示例(数据仅为虚构)。
英文:
Thanks to the comment of David, I was able to track the error using the vega-lite online editor. The trick was to write a part for mark combining point and line descriptions. The encoding goes into a second code block. The working example (data is just imaginary) can be found below.
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.1"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: 300,
height: 200,
padding: 5,
title: "Line chart of MMRM display",
description: 'A simple line chart with embedded data.',
data: {
values: [
{Time: 1, AVAL: 28, Treatment:'Placebo'},
{Time: 2, AVAL: 55, Treatment:'Placebo'},
{Time: 3, AVAL: 43, Treatment:'Placebo'},
{Time: 4, AVAL: 67, Treatment:'Placebo'},
{Time: 5, AVAL: 56, Treatment:'Placebo'},
{Time: 6, AVAL: 53, Treatment:'Placebo'},
{Time: 7, AVAL: 19, Treatment:'Placebo'},
{Time: 8, AVAL: 43, Treatment:'Placebo'},
{Time: 9, AVAL: 52, Treatment:'Placebo'},
{Time: 1, AVAL: 48, Treatment:'Intervention'},
{Time: 2, AVAL: 65, Treatment:'Intervention'},
{Time: 3, AVAL: 73, Treatment:'Intervention'},
{Time: 4, AVAL: 91, Treatment:'Intervention'},
{Time: 5, AVAL: 81, Treatment:'Intervention'},
{Time: 6, AVAL: 83, Treatment:'Intervention'},
{Time: 7, AVAL: 89, Treatment:'Intervention'},
{Time: 8, AVAL: 87, Treatment:'Intervention'},
{Time: 9, AVAL: 82, Treatment:'Intervention'}
]
},
"mark": {
"type": "line",
"point": {
"filled": false,
"fill": "white"
}
},
"encoding": {
"x": {"field": "Time", "type": "quantitative"},
"y": {"field": "AVAL", "type": "quantitative"},
"color": {"field": "Treatment", "type": "nominal"}
}
}
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论