使用 vega-lite 的甘特图示例

Question

我只是想分享一种使用 Vega-lite 设计简单甘特图的方法。

如果有人可以让我知道如何删除栏左边缘的半径，那将非常有帮助。否则，json 规范应该可供社区使用。

任何其他改进此规范的提示将不胜感激。如果您觉得有用，请留下一些评论。

我设计这张图表的灵感来自 Hoosier BI 不久前发布的 Deneb 视频。

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-15",
        "status": "Behind schedule",
        "description": "This is the description of project 3."
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))", "as": "currentDate"}
  ],
  "title": {
    "text": "Gantt Chart with Rule Line for Today's Date",
    "fontSize": 14,
    "anchor": "start",
    "dy": -15,
    "color": "#706D6C"
  },
  "layer": [
    {
      "mark": {"type": "bar", "tooltip": true, "cornerRadiusEnd": 10},
      "encoding": {
        "y": {
          "field": "name",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x": {
          "field": "start",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "format": "%d-%b",
            "domain": true,
            "grid": false,
            "ticks": true,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x2": {"field": "end"},
        "color": {
          "title": null,
          "field": "status",
          "type": "nominal",
          "legend": {
            "padding": 0,
            "labelFontSize": 11,
            "labelColor": "#706D6C",
            "rowPadding": 8,
            "symbolOpacity": 0.9,
            "symbolType": "square"
          }
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {
        "x": {
          "field": "currentDate",
          "type": "temporal",
          "axis": {"format": "%Y-%m-%d"}
        }
      }
    }
  ],
  "config": {"view": {"stroke": null}}
} ```


  [1]: https://i.stack.imgur.com/lVYKB.png

Answer 1

给你。

 {"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-15",
        "status": "Behind schedule",
        "description": "This is the description of project 3."
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))", "as": "currentDate"}
  ],
  "title": {
    "text": "Gantt Chart with Rule Line for Today's Date",
    "fontSize": 14,
    "anchor": "start",
    "dy": -15,
    "color": "#706D6C"
  },
  "layer": [
    {
      "mark": {"type": "bar", "tooltip": true, "cornerRadiusTopRight": 10,"cornerRadiusBottomRight": 10},
      "encoding": {
        "y": {
          "field": "name",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x": {
          "field": "start",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "format": "%d-%b",
            "domain": true,
            "grid": false,
            "ticks": true,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x2": {"field": "end"},
        "color": {
          "title": null,
          "field": "status",
          "type": "nominal",
          "legend": {
            "padding": 0,
            "labelFontSize": 11,
            "labelColor": "#706D6C",
            "rowPadding": 8,
            "symbolOpacity": 0.9,
            "symbolType": "square"
          }
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {
        "x": {
          "field": "currentDate",
          "type": "temporal",
          "axis": {"format": "%Y-%m-%d"}
        }
      }
    }
  ],
  "config": {"view": {"stroke": null}}
}