You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

基于Vega-Lite的甘特图实现:移除条形左圆角及优化建议问询

分享一种Vega-Lite简易甘特图实现方案

我想分享一种用Vega-Lite设计简易甘特图的方法,目前这份JSON配置已经可以供社区直接使用。唯一的疑问是不知道怎么移除条形左边缘的圆角,希望有人能帮忙解决这个问题。

欢迎大家提出优化该配置的其他建议,如果你觉得这个方案对你有用,欢迎留言交流。

这个设计灵感来自Hoosier BI此前发布的一则Deneb视频。

Vega-Lite甘特图效果

{
  "$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}}
}

内容的提问来源于stack exchange,提问作者APB Reports

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.27 13:37:59