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

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

How to use multiple marks in vega-lite whem embedded into HTML?

问题

我想要将一个Vega-Lite图表嵌入到HTML页面中。它应该绘制一个带有额外点符号的折线图。然而，当它嵌入到HTML中时，似乎Vega-Lite用于多个层次的代码不起作用。

我的代码看起来像下面显示的那样。当我尝试添加层次，就像这里，或者尝试在一个括号内组合两个标记，就像这里，它不起作用。我确信是由于HTML嵌入，但我无法从文档中找出原因。

谢谢你的建议。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>嵌入Vega-Lite</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
  6.     <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.9.1"></script>
  7.     <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.1"></script>
  8.   </head>
  9.   <body>
  10.     <div id="vis"></div>
  12.     <script type="text/javascript">
  13.       var yourVlSpec = {
  14.         $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
  15.         width: 300,
  16.         height: 200,
  17.         padding: 5,
  18.         title: "MMRM显示的折线图",
  19.         description: '一个带有嵌入数据的简单折线图。',
  20.         data: {
  21.           values: [
  22.             {Time: 1, AVAL: 28, Treatment:'Placebo'},
  23.             {Time: 2, AVAL: 55, Treatment:'Placebo'},
  24.             {Time: 3, AVAL: 43, Treatment:'Placebo'},
  25.             {Time: 4, AVAL: 67, Treatment:'Placebo'},
  26.             {Time: 5, AVAL: 56, Treatment:'Placebo'},
  27.             {Time: 6, AVAL: 53, Treatment:'Placebo'},
  28.             {Time: 7, AVAL: 19, Treatment:'Placebo'},
  29.             {Time: 8, AVAL: 43, Treatment:'Placebo'},
  30.             {Time: 9, AVAL: 52, Treatment:'Placebo'},
  31.             {Time: 1, AVAL: 48, Treatment:'Intervention'},
  32.             {Time: 2, AVAL: 65, Treatment:'Intervention'},
  33.             {Time: 3, AVAL: 73, Treatment:'Intervention'},
  34.             {Time: 4, AVAL: 91, Treatment:'Intervention'},
  35.             {Time: 5, AVAL: 81, Treatment:'Intervention'},
  36.             {Time: 6, AVAL: 83, Treatment:'Intervention'},
  37.             {Time: 7, AVAL: 89, Treatment:'Intervention'},
  38.             {Time: 8, AVAL: 87, Treatment:'Intervention'},
  39.             {Time: 9, AVAL: 82, Treatment:'Intervention'}
  40.           ]
  41.         },
  42.         mark: 'line' ,
  43.         encoding: {
  44.           x: {field: 'Time', type: 'quantitative'},
  45.           y: {field: 'AVAL', type: 'quantitative'},
  46.           color: {"field": "Treatment", "type": "nominal"}
  47.         }
  48.       }
  49.       vegaEmbed('#vis', yourVlSpec);
  50.     </script>
  51.   </body>
  52. </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.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Embedding Vega-Lite&lt;/title&gt;
  5. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega@5.25.0&quot;&gt;&lt;/script&gt;
  6. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@5.9.1&quot;&gt;&lt;/script&gt;
  7. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@6.22.1&quot;&gt;&lt;/script&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;div id=&quot;vis&quot;&gt;&lt;/div&gt;
  11. &lt;script type=&quot;text/javascript&quot;&gt;
  12. var yourVlSpec = {
  13. $schema: &#39;https://vega.github.io/schema/vega-lite/v5.json&#39;,
  14. width: 300,
  15. height: 200,
  16. padding: 5,
  17. title: &quot;Line chart of MMRM display&quot;,
  18. description: &#39;A simple line chart with embedded data.&#39;,
  19. data: {
  20. values: [
  21. {Time: 1, AVAL: 28, Treatment:&#39;Placebo&#39;},
  22. {Time: 2, AVAL: 55, Treatment:&#39;Placebo&#39;},
  23. {Time: 3, AVAL: 43, Treatment:&#39;Placebo&#39;},
  24. {Time: 4, AVAL: 67, Treatment:&#39;Placebo&#39;},
  25. {Time: 5, AVAL: 56, Treatment:&#39;Placebo&#39;},
  26. {Time: 6, AVAL: 53, Treatment:&#39;Placebo&#39;},
  27. {Time: 7, AVAL: 19, Treatment:&#39;Placebo&#39;},
  28. {Time: 8, AVAL: 43, Treatment:&#39;Placebo&#39;},
  29. {Time: 9, AVAL: 52, Treatment:&#39;Placebo&#39;},
  30. {Time: 1, AVAL: 48, Treatment:&#39;Intervention&#39;},
  31. {Time: 2, AVAL: 65, Treatment:&#39;Intervention&#39;},
  32. {Time: 3, AVAL: 73, Treatment:&#39;Intervention&#39;},
  33. {Time: 4, AVAL: 91, Treatment:&#39;Intervention&#39;},
  34. {Time: 5, AVAL: 81, Treatment:&#39;Intervention&#39;},
  35. {Time: 6, AVAL: 83, Treatment:&#39;Intervention&#39;},
  36. {Time: 7, AVAL: 89, Treatment:&#39;Intervention&#39;},
  37. {Time: 8, AVAL: 87, Treatment:&#39;Intervention&#39;},
  38. {Time: 9, AVAL: 82, Treatment:&#39;Intervention&#39;}
  39. ]
  40. },
  41. mark: &#39;line&#39; ,
  42. encoding: {
  43. x: {field: &#39;Time&#39;, type: &#39;quantitative&#39;},
  44. y: {field: &#39;AVAL&#39;, type: &#39;quantitative&#39;},
  45. color: {&quot;field&quot;: &quot;Treatment&quot;, &quot;type&quot;: &quot;nominal&quot;}
  46. }
  47. }
  48. vegaEmbed(&#39;#vis&#39;, yourVlSpec);
  49. &lt;/script&gt;
  50. &lt;/body&gt;
  51. &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.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Embedding Vega-Lite&lt;/title&gt;
  5. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega@5.25.0&quot;&gt;&lt;/script&gt;
  6. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@5.9.1&quot;&gt;&lt;/script&gt;
  7. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@6.22.1&quot;&gt;&lt;/script&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;div id=&quot;vis&quot;&gt;&lt;/div&gt;
  11. &lt;script type=&quot;text/javascript&quot;&gt;
  12. var yourVlSpec = {
  13. $schema: &#39;https://vega.github.io/schema/vega-lite/v5.json&#39;,
  14. width: 300,
  15. height: 200,
  16. padding: 5,
  17. title: &quot;Line chart of MMRM display&quot;,
  18. description: &#39;A simple line chart with embedded data.&#39;,
  19. data: {
  20. values: [
  21. {Time: 1, AVAL: 28, Treatment:&#39;Placebo&#39;},
  22. {Time: 2, AVAL: 55, Treatment:&#39;Placebo&#39;},
  23. {Time: 3, AVAL: 43, Treatment:&#39;Placebo&#39;},
  24. {Time: 4, AVAL: 67, Treatment:&#39;Placebo&#39;},
  25. {Time: 5, AVAL: 56, Treatment:&#39;Placebo&#39;},
  26. {Time: 6, AVAL: 53, Treatment:&#39;Placebo&#39;},
  27. {Time: 7, AVAL: 19, Treatment:&#39;Placebo&#39;},
  28. {Time: 8, AVAL: 43, Treatment:&#39;Placebo&#39;},
  29. {Time: 9, AVAL: 52, Treatment:&#39;Placebo&#39;},
  30. {Time: 1, AVAL: 48, Treatment:&#39;Intervention&#39;},
  31. {Time: 2, AVAL: 65, Treatment:&#39;Intervention&#39;},
  32. {Time: 3, AVAL: 73, Treatment:&#39;Intervention&#39;},
  33. {Time: 4, AVAL: 91, Treatment:&#39;Intervention&#39;},
  34. {Time: 5, AVAL: 81, Treatment:&#39;Intervention&#39;},
  35. {Time: 6, AVAL: 83, Treatment:&#39;Intervention&#39;},
  36. {Time: 7, AVAL: 89, Treatment:&#39;Intervention&#39;},
  37. {Time: 8, AVAL: 87, Treatment:&#39;Intervention&#39;},
  38. {Time: 9, AVAL: 82, Treatment:&#39;Intervention&#39;}
  39. ]
  40. },
  41. &quot;mark&quot;: {
  42. &quot;type&quot;: &quot;line&quot;,
  43. &quot;point&quot;: {
  44. &quot;filled&quot;: false,
  45. &quot;fill&quot;:  &quot;white&quot;
  46. }
  47. },
  48. &quot;encoding&quot;: {
  49. &quot;x&quot;: {&quot;field&quot;: &quot;Time&quot;, &quot;type&quot;: &quot;quantitative&quot;},
  50. &quot;y&quot;: {&quot;field&quot;: &quot;AVAL&quot;, &quot;type&quot;: &quot;quantitative&quot;},
  51. &quot;color&quot;: {&quot;field&quot;: &quot;Treatment&quot;, &quot;type&quot;: &quot;nominal&quot;}
  52. }
  53. }
  54. vegaEmbed(&#39;#vis&#39;, yourVlSpec);
  55. &lt;/script&gt;
  56. &lt;/body&gt;
  57. &lt;/html&gt;

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

发表评论

匿名网友

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

确定