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

Vega-Lite中轴标签字体粗细条件设置问题求助

问题描述
  • 尝试在Vega-Lite甘特图中配置参数,希望仅phase为"0"的Project 1标签显示为粗体
  • 已尝试将phase设置为字符串和数字类型,配置的代码片段如下,但均未生效:
"labelFontWeight": {"condition": {"test": {"field": "datum.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": "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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.26 08:17:05