如何在嵌入到HTML中的Vega-Lite中使用多个标记?

huangapple go评论56阅读模式
英文:

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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Embedding Vega-Lite&lt;/title&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega@5.25.0&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@5.9.1&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@6.22.1&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;vis&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var yourVlSpec = {
$schema: &#39;https://vega.github.io/schema/vega-lite/v5.json&#39;,
width: 300,
height: 200,
padding: 5,
title: &quot;Line chart of MMRM display&quot;,
description: &#39;A simple line chart with embedded data.&#39;,
data: {
values: [
{Time: 1, AVAL: 28, Treatment:&#39;Placebo&#39;},
{Time: 2, AVAL: 55, Treatment:&#39;Placebo&#39;},
{Time: 3, AVAL: 43, Treatment:&#39;Placebo&#39;},
{Time: 4, AVAL: 67, Treatment:&#39;Placebo&#39;},
{Time: 5, AVAL: 56, Treatment:&#39;Placebo&#39;},
{Time: 6, AVAL: 53, Treatment:&#39;Placebo&#39;},
{Time: 7, AVAL: 19, Treatment:&#39;Placebo&#39;},
{Time: 8, AVAL: 43, Treatment:&#39;Placebo&#39;},
{Time: 9, AVAL: 52, Treatment:&#39;Placebo&#39;},
{Time: 1, AVAL: 48, Treatment:&#39;Intervention&#39;},
{Time: 2, AVAL: 65, Treatment:&#39;Intervention&#39;},
{Time: 3, AVAL: 73, Treatment:&#39;Intervention&#39;},
{Time: 4, AVAL: 91, Treatment:&#39;Intervention&#39;},
{Time: 5, AVAL: 81, Treatment:&#39;Intervention&#39;},
{Time: 6, AVAL: 83, Treatment:&#39;Intervention&#39;},
{Time: 7, AVAL: 89, Treatment:&#39;Intervention&#39;},
{Time: 8, AVAL: 87, Treatment:&#39;Intervention&#39;},
{Time: 9, AVAL: 82, Treatment:&#39;Intervention&#39;}
]
},
mark: &#39;line&#39; ,
encoding: {
x: {field: &#39;Time&#39;, type: &#39;quantitative&#39;},
y: {field: &#39;AVAL&#39;, type: &#39;quantitative&#39;},
color: {&quot;field&quot;: &quot;Treatment&quot;, &quot;type&quot;: &quot;nominal&quot;}
}
}
vegaEmbed(&#39;#vis&#39;, yourVlSpec);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Embedding Vega-Lite&lt;/title&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega@5.25.0&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@5.9.1&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@6.22.1&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;vis&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var yourVlSpec = {
$schema: &#39;https://vega.github.io/schema/vega-lite/v5.json&#39;,
width: 300,
height: 200,
padding: 5,
title: &quot;Line chart of MMRM display&quot;,
description: &#39;A simple line chart with embedded data.&#39;,
data: {
values: [
{Time: 1, AVAL: 28, Treatment:&#39;Placebo&#39;},
{Time: 2, AVAL: 55, Treatment:&#39;Placebo&#39;},
{Time: 3, AVAL: 43, Treatment:&#39;Placebo&#39;},
{Time: 4, AVAL: 67, Treatment:&#39;Placebo&#39;},
{Time: 5, AVAL: 56, Treatment:&#39;Placebo&#39;},
{Time: 6, AVAL: 53, Treatment:&#39;Placebo&#39;},
{Time: 7, AVAL: 19, Treatment:&#39;Placebo&#39;},
{Time: 8, AVAL: 43, Treatment:&#39;Placebo&#39;},
{Time: 9, AVAL: 52, Treatment:&#39;Placebo&#39;},
{Time: 1, AVAL: 48, Treatment:&#39;Intervention&#39;},
{Time: 2, AVAL: 65, Treatment:&#39;Intervention&#39;},
{Time: 3, AVAL: 73, Treatment:&#39;Intervention&#39;},
{Time: 4, AVAL: 91, Treatment:&#39;Intervention&#39;},
{Time: 5, AVAL: 81, Treatment:&#39;Intervention&#39;},
{Time: 6, AVAL: 83, Treatment:&#39;Intervention&#39;},
{Time: 7, AVAL: 89, Treatment:&#39;Intervention&#39;},
{Time: 8, AVAL: 87, Treatment:&#39;Intervention&#39;},
{Time: 9, AVAL: 82, Treatment:&#39;Intervention&#39;}
]
},
&quot;mark&quot;: {
&quot;type&quot;: &quot;line&quot;,
&quot;point&quot;: {
&quot;filled&quot;: false,
&quot;fill&quot;:  &quot;white&quot;
}
},
&quot;encoding&quot;: {
&quot;x&quot;: {&quot;field&quot;: &quot;Time&quot;, &quot;type&quot;: &quot;quantitative&quot;},
&quot;y&quot;: {&quot;field&quot;: &quot;AVAL&quot;, &quot;type&quot;: &quot;quantitative&quot;},
&quot;color&quot;: {&quot;field&quot;: &quot;Treatment&quot;, &quot;type&quot;: &quot;nominal&quot;}
}
}
vegaEmbed(&#39;#vis&#39;, yourVlSpec);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年5月25日 17:45:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76330934.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定