代码之家  ›  专栏  ›  技术社区  ›  Drenai

Vega多系列折线图-使用虚线表示一个系列

  •  1
  • Drenai  · 技术社区  · 1 年前

    我有一个多系列折线图,根据域(类别)(即字段)为线条提供自定义颜色 c 在我的数据中

    enter image description here

    我想拥有 Alpha 类别行(在本例中)以虚线样式显示,但到目前为止,我只看到了所有行都是虚线的示例

    我当前的Vega规范/配置如下

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "width": 200,
      "height": 200,
      "config": {
        "background": "transparent",
        "view": {"stroke": "transparent"},
        "aria": true
      },
      "data": {
        "name": "table",
        "values": [
          {"x": 0, "y": 0, "c": "Alpha"},
          {"x": 1, "y": 3, "c": "Alpha"},
          {"x": 2, "y": 1, "c": "Alpha"},
          {"x": 0, "y": 1, "c": "Beta"},
          {"x": 1, "y": 2, "c": "Beta"},
          {"x": 2, "y": 0, "c": "Beta"}
        ]
      },
      "mark": {"type": "line", "interpolate": "monotone", "point": false},
      "encoding": {
        "x": {
          "type": "quantitative",
          "field": "x"
        },
        "y": {
          "type": "quantitative",
          "field": "y"
        },
        "color": {
          "field": "c",
          "type": "nominal",
          "scale": {
            "domain": ["Alpha", "Beta"],
            "range": ["rgb(200, 200, 200)", "rgb(28, 51, 99)"]
          }
        }
      }
    }
    
    1 回复  |  直到 1 年前
        1
  •  2
  •   davidebacci    1 年前

    只需提供一个刻度。享受

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "width": 200,
      "height": 200,
      "config": {
        "background": "transparent",
        "view": {"stroke": "transparent"},
        "aria": true
      },
      "data": {
        "name": "table",
        "values": [
          {"x": 0, "y": 0, "c": "Alpha"},
          {"x": 1, "y": 3, "c": "Alpha"},
          {"x": 2, "y": 1, "c": "Alpha"},
          {"x": 0, "y": 1, "c": "Beta"},
          {"x": 1, "y": 2, "c": "Beta"},
          {"x": 2, "y": 0, "c": "Beta"}
        ]
      },
      "mark": {"type": "line", "interpolate": "monotone", "point": false},
      "encoding": {
        "x": {"type": "quantitative", "field": "x"},
        "y": {"type": "quantitative", "field": "y"},
        "color": {
          "field": "c",
          "type": "nominal",
          "scale": {
            "domain": ["Alpha", "Beta"],
            "range": ["rgb(200, 200, 200)", "rgb(28, 51, 99)"]
          }
        },
        "strokeDash": {
          "field": "c",
          "type": "nominal",
          "scale": {"domain": ["Alpha", "Beta"], "range": [0, 10]}
        }
      }
    }