HTML嵌入Vega-Lite时如何实现带点标记的折线图？

你遇到的问题并非HTML嵌入方式导致，而是Vega-Lite的图表配置写法有误。Vega-Lite原生支持折线+散点的组合可视化，以下提供两种可行的实现方案：

方案1：多标记语法（简洁版） #

直接将mark设置为包含line和point的数组，共享同一套编码规则，代码更简洁：

<!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'}, {type: 'point'}],
        encoding: {
          x: {field: 'Time', type: 'quantitative'},
          y: {field: 'AVAL', type: 'quantitative'},
          color: {"field": "Treatment", "type": "nominal"}
        }
      }
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>

方案2：图层语法（灵活版） #

如果需要对折线和点分别设置样式（比如点的大小、折线的粗细），可以使用图层语法，每个图层独立配置标记和编码：

<!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'}
          ]
        },
        // 使用图层组合折线和点
        layer: [
          {mark: 'line', encoding: {
              x: {field: 'Time', type: 'quantitative'},
              y: {field: 'AVAL', type: 'quantitative'},
              color: {"field": "Treatment", "type": "nominal"}
            }},
          {mark: {type: 'point', size: 80}, encoding: {
              x: {field: 'Time', type: 'quantitative'},
              y: {field: 'AVAL', type: 'quantitative'},
              color: {"field": "Treatment", "type": "nominal"}
            }}
        ]
      }
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>

关键说明 #

• 两种方案都不需要修改HTML嵌入逻辑，问题核心是Vega-Lite配置的写法错误。
• 多标记语法适合不需要差异化样式的场景，代码更紧凑。
• 图层语法适合需要单独调整折线或点样式的场景，灵活性更高。

内容的提问来源于stack exchange，提问作者Jens