问题

我想要将一个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;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

从数据库中获取多个表单在一个单独的Golang web模板中。

如何处理同时具有多个输入和多个文件的请求

如何将 flex 盒子旋转回来

如何将我的自己的CSV文件加载到Vega-Lite在线编辑器中？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论