Plotly图表Shape的Label函数在UI中不显示问题求助

我在Mendix 8.13.1版本的AnyChart组件中使用Plotly配置，layout.JSON的shapes节点内配置了label属性，但标签未在UI中显示，其余功能均正常。参考了Plotly官方的形状标签添加文档，以下是我的Data.JSON和layout.JSON配置：

Data.JSON #

[
  {
    "x": ["2017", "2018", "2019", "2020", "2021", "2022"],
    "y": [0.010101, -0.21070779, 0.120275834, -0.190362337, -0.391092741],
    "yaxis": "y2",
    "hovertemplate": "Priedce: %{y:$.2f}<extra></extra>",
    "type": "scatter",
    "width": 0.2,
    "name": "Red",
    "marker": {
      "size": 10,
      "color": "rgb(20,79,141)"
    }
  },
  {
    "x": ["2017", "2018", "2019", "2020", "2021", "2022"],
    "y": [12289, 9795, 9082, 8914, 5401],
    "type": "bar",
    "width": 0.25,
    "name": "Red",
    "hovertemplate": "Pricede: %{y:$.2f}<p>Hello</p><extra></extra>",
    "marker": {
      "color": "rgb(0,206,255)",
      "background-color": "Red",
      "opacity": 0.5
    }
  },
  {
    "x": ["2017", "2018", "2019", "2020", "2021", "2022"],
    "y": [68126, 53771, 47300, 38210, 23260],
    "width": 0.25,
    "hovertemplate": "Priedce: %{y:$.2f}<extra></extra>",
    "type": "bar",
    "marker": {
      "color": "rgb(180,223,255)",
      "background-color": "Red",
      "opacity": 0.5
    }
  },
  {
    "x": ["2017", "2018", "2019", "2020", "2021", "2022"],
    "y": [-0.010101, 0.202945724, -0.072792241, -0.018498128, -0.39409917],
    "yaxis": "y2",
    "hovertemplate": "Priedce: %{y:$.2f}<extra></extra>",
    "type": "scatter",
    "marker": {
      "size": 10,
      "color": "rgb(22,158,199)"
    }
  }
]

layout.JSON #

{
  "barmode": "group",
  "hoverinfo":true,
  "hoverlabel": {
    "bgcolor": "#FFF",
    "bordercolor": "rgba(58,200,225,.5)",
    "font": {
      "color": "black",
      "size": 12.5
    }
  },
  "xaxis": {
    "tickformat": "d"
  },
  "yaxis": {
    "title": {
      "text": "Volume (EU)",
      "standoff": 45
    },
    "showgrid": true,
    "range": [-1, 81000]
  },
  "yaxis2": {
    "title": {
      "text": "Volume Growth (%)",
      "standoff": 45,
      "font": {
        "size": 15
      }
    },
    "showgrid": false,
    "overlaying": "y",
    "tickformat": "+5.0%",
    "zeroline": false,
    "font": {
      "family": "Courier New, monospace",
      "size": 70
    },
    "yref": "paper",
    "automargin": true,
    "side": "right"
  },
  "showlegend": true,
  "legend": {
    "orientation": "h",
    "y": "-5"
  },
  "shapes": [
    {
      "type": "rect",
      "layer": "below",
      "Text": "hello",
      "xref": "x",
      "yref": "paper",
      "x0": "2016.5",
      "y0": 0,
      "x1": "2017.5",
      "y1": 1,
      "fillcolor": "#f3f3f3",
      "opacity": 0.5,
      "line": {
        "width": 2,
        "opacity": 1,
        "color": "#9965e2"
      },
      "label": {
        "text": "testing",
        "font": {
          "size": 10,
          "color": "black"
        },
        "yanchor": "top"
      }
    },
    {
      "type": "line",
      "layer": "below",
      "xref": "x",
      "yref": "paper",
      "x0": "2021.5",
      "y0": 0,
      "x1": "2022.5",
      "y1": 1,
      "fillcolor": "#ecfff7",
      "opacity": 1,
      "line": {
        "width": 0
      },
      "label": {
        "text": "Volume Growth (%)",
        "yanchor": "top"
      }
    }
  ],
  "annotations": [
    {
      "x": 2024,
      "xref": "x",
      "text": "Annotation Text",
      "textposition": "top",
      "yanchor":"top"
    }
  ]
}

问题原因及解决方案 #

核心原因 #

Mendix 8.13.1搭配的AnyChart组件所依赖的Plotly版本较低，不支持shape内嵌套label的特性——该特性是Plotly较新版本才引入的，老版本无法识别shape中的label配置，因此不会渲染标签。

可行解决方案 #

方案1：改用annotations实现标签效果（推荐）

annotations是Plotly长期支持的特性，可以完美替代shape label的功能，只需将原来shape内的label配置转换为annotations项，并指定正确的定位参数：

修改后的layout.JSON中，annotations部分补充对应标签：

"annotations": [
    {
      "x": 2024,
      "xref": "x",
      "text": "Annotation Text",
      "textposition": "top",
      "yanchor":"top"
    },
    // 对应第一个shape的标签
    {
      "x": 2017,
      "xref": "x",
      "y": 0.95,
      "yref": "paper",
      "text": "testing",
      "font": {
        "size": 10,
        "color": "black"
      },
      "showarrow": false,
      "yanchor": "top"
    },
    // 对应第二个shape的标签
    {
      "x": 2022,
      "xref": "x",
      "y": 0.95,
      "yref": "paper",
      "text": "Volume Growth (%)",
      "showarrow": false,
      "yanchor": "top"
    }
  ]

说明：

• x设为shape覆盖范围的中间值（比如第一个shape覆盖2016.5-2017.5，x设为2017）
• yref使用"paper"对应原来的shape坐标体系，y设为0.95让标签靠近顶部
• showarrow设为false去掉默认箭头，保持和shape label一致的显示效果

方案2：升级组件或Plotly版本

如果项目允许，可以尝试：

• 升级Mendix的AnyChart组件到最新版本，确保其依赖的Plotly版本支持shape label特性
• 手动替换组件内的Plotly库文件为高版本（注意兼容性风险）

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