Vega-Lite中轴标签字体粗细条件设置问题求助
问题描述
- 尝试在Vega-Lite甘特图中配置参数,希望仅
phase为"0"的Project 1标签显示为粗体 - 已尝试将
phase设置为字符串和数字类型,配置的代码片段如下,但均未生效:
"labelFontWeight": {"condition": {"test": {"field": "datum.phase","equal": "0"},"value": "bold"},"value": "normal"}
- 当前效果示意图:

- 完整代码如下:
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "width": 500, "data": { "values": [ { "phase": "0", "name": "Project 1", "start": "2023-03-01", "end": "2023-03-15", "pay": "2023-04-15", "status": "On track", "description": "This is the description of project 1." }, { "phase": "1", "name": "Project 2", "start": "2023-03-10", "end": "2023-04-15", "pay": "2023-05-15", "status": "Delayed", "description": "This is the description of project 2." }, { "phase": "2", "name": "Project 3", "start": "2023-04-01", "end": "2023-05-15", "pay": "2023-06-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": 4, "cornerRadiusBottomRight": 4 }, "encoding": { "y": { "field": "name", "type": "nominal", "axis": { "domain": true, "grid": false, "ticks": false, "labels": true, "labelFontSize": 14, "labelPadding": 10, "labelFontWeight": {"condition": {"test": {"field": "datum.phase","equal": "0"},"value": "bold"},"value": "normal"} }, "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": "%d-%b"} } } }, { "mark": {"type": "tick", "thickness": 1, "bandSize": 2, "color": "gray"}, "encoding": { "x": {"field": "pay", "type": "temporal", "axis": {"format": "%d-%b"}}, "y": { "field": "name", "type": "nominal", "title": null } } }, { "mark": { "type": "text", "align": "right", "baseline": "middle", "dx": -5 }, "encoding": { "x": {"field": "pay", "type": "temporal"}, "y": {"field": "name", "type": "nominal"}, "text": {"field": "pay", "type": "temporal", "format": "%d-%b"}, "color": {"value": "gray"} } } ], "config": {"view": {"stroke": null}} }
解决方案
问题出在条件判断的field字段写法错误——不需要添加datum.前缀,直接指定字段名phase即可。修改后的labelFontWeight配置如下:
"labelFontWeight": { "condition": { "test": {"field": "phase", "equal": "0"}, "value": "bold" }, "value": "normal" }
替换原代码中对应位置的配置后,Project 1的标签就会显示为粗体,其他项目标签保持正常字体权重。
完整修正后的代码
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "width": 500, "data": { "values": [ { "phase": "0", "name": "Project 1", "start": "2023-03-01", "end": "2023-03-15", "pay": "2023-04-15", "status": "On track", "description": "This is the description of project 1." }, { "phase": "1", "name": "Project 2", "start": "2023-03-10", "end": "2023-04-15", "pay": "2023-05-15", "status": "Delayed", "description": "This is the description of project 2." }, { "phase": "2", "name": "Project 3", "start": "2023-04-01", "end": "2023-05-15", "pay": "2023-06-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": 4, "cornerRadiusBottomRight": 4 }, "encoding": { "y": { "field": "name", "type": "nominal", "axis": { "domain": true, "grid": false, "ticks": false, "labels": true, "labelFontSize": 14, "labelPadding": 10, "labelFontWeight": { "condition": { "test": {"field": "phase", "equal": "0"}, "value": "bold" }, "value": "normal" } }, "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": "%d-%b"} } } }, { "mark": {"type": "tick", "thickness": 1, "bandSize": 2, "color": "gray"}, "encoding": { "x": {"field": "pay", "type": "temporal", "axis": {"format": "%d-%b"}}, "y": { "field": "name", "type": "nominal", "title": null } } }, { "mark": { "type": "text", "align": "right", "baseline": "middle", "dx": -5 }, "encoding": { "x": {"field": "pay", "type": "temporal"}, "y": {"field": "name", "type": "nominal"}, "text": {"field": "pay", "type": "temporal", "format": "%d-%b"}, "color": {"value": "gray"} } } ], "config": {"view": {"stroke": null}} }
内容的提问来源于stack exchange,提问作者APB Reports
相关产品推荐
相关产品推荐

