基于Vega-Lite的甘特图实现:移除条形左圆角及优化建议问询
分享一种Vega-Lite简易甘特图实现方案
我想分享一种用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}} }
内容的提问来源于stack exchange,提问作者APB Reports
相关产品推荐
相关产品推荐

