Power BI中Vega-Lite实现X轴标签按分号换行求助

我在Power BI用Vega-Lite做可视化时，想让X轴标签在每个;后面自动换行，试了好几种方法都没用：

• 用了代码"labelExpr": "replace(datum.label, /;\\s*/g, '\\n')"，结果只把;删了，根本没换行
• 删了offset函数，还是没变化

修改前X轴标签是单行挤在一起，多个用;分隔的内容连在一起；加了labelExpr后;没了，但内容还是单行，没实现换行。

下面是我用的完整代码：

{  
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",  
  "data": {"name": "dataset"},  
  "encoding": {  
    "x": {  
      "field": "Bezeichner",  
      "type": "nominal",  
      "axis": {  
        "title": "",  
        "labelAngle": 0,  
        "labelAlign": "center",  
        "labelBaseline": "middle",  
        "labelLineHeight": 12,  
        "labelFontSize": 15,  
        "labelPadding": 10,  
        "labelLimit": 500,  
        "labelExpr": "replace(datum.label, /;\\s*/g, '\\n')"  
      }  
    }  
  },  
  "layer": [  
    {  
      "mark": {"type": "bar", "opacity": 1},  
      "encoding": {  
        "y": {  
          "field": "LCC",  
          "type": "quantitative",  
          "axis": {"title": "",  
           "titleColor": "#118DFF",  
           "orient": "right",  
          "labelFontSize": 15,  
          "labelFont": "Roboto",  
           "labelPadding": 10,  
          "grid": true}  
        },  
        "xOffset": {"value": 57},  
        "color": {"value": "#118DFF"},  
        "tooltip": [  
          {"field": "Bezeichner", "type": "nominal", "title": "Bezeichner"},  
          {"field": "LCC", "type": "quantitative", "title": "LCC"},  
          {"field": "LCA", "type": "quantitative", "title": "LCA"}  
        ]  
      }  
    },  
    {  
      "mark": {"type": "bar", "opacity":1},  
      "encoding": {  
        "y": {  
          "field": "LCA",  
          "type": "quantitative",  
          "axis": {  
            "title": "",  
            "orient": "left",  
            "titleColor": "#AAE574",  
            "grid": false,  
            "labelFontSize": 15,  
            "labelFont": "Roboto",  
            "labelPadding": 10  
          }  
        },  
        "xOffset": {"value": 8},  
        "color": {"value": "#AAE574"},  
        "tooltip": [  
          {"field": "Bezeichner", "type": "nominal", "title": "Bezeichner"},  
          {"field": "LCC", "type": "quantitative", "title": "LCC"},  
          {"field": "LCA", "type": "quantitative", "title": "LCA"}  
        ]  
      }  
    }  
  ],  
  "resolve": {"scale": {"y": "independent"}},  
  "config": {  
    "bar": {"size": 50},  
    "scale": {  
      "bandPaddingInner": 0.845,  
      "bandPaddingOuter": 0.5  
    }  
  }  
}

解决方法 #

问题出在Power BI的Vega-Lite渲染器不认纯文本的\n换行符，换成HTML的<br>标签就行，还要开HTML渲染：

1. 把labelExpr里的'\n'改成'<br>'，同时在轴配置里加"labelHtml": true，让渲染器解析HTML标签。修改后的X轴配置如下：

"x": {
  "field": "Bezeichner",
  "type": "nominal",
  "axis": {
    "title": "",
    "labelAngle": 0,
    "labelAlign": "center",
    "labelBaseline": "middle",
    "labelLineHeight": 1.5, // 改成相对行高，多行标签更美观
    "labelFontSize": 15,
    "labelPadding": 10,
    "labelLimit": 500,
    "labelHtml": true,
    "labelExpr": "replace(datum.label, /;\\s*/g, '<br>')"
  }
}

2. 额外检查：确保labelLimit值足够大，别让文本被截断；labelLineHeight可以调得宽松点，让多行标签不挤在一起。

这样改完，X轴标签就会在原来;的位置自动换行了。

内容的提问来源于stack exchange，提问作者dipanada