为何Plotly.js散点图多Y轴无法像CodePen示例那样对齐？

我们基于AngularJS开发Plotly.js图表应用，需要实现散点图多Y轴堆叠（理想为右侧横向堆叠，或奇偶轴分左右）。参考官方示例（示例中2个Y轴在左侧，2个在右侧堆叠）自行实现时，第三个Y轴（kWh）出现在图表内部（距左侧约85%位置）。尝试将position设为1.0，轴仍在图表内；设为大于1.0则回到左侧。

Trace数据 #

[
   {
      "type":"scatter",
      "x":[...],
      "y":[...],
      "hovertemplate":"%{x}<br>%{y:.2f} %{text}<extra></extra>",
      "text":[...],
      "name":"°C",
      "marker":{
         "color":"#89d300",
         "size":1,
         "opacity":1
      },
      "line":{
         "width":1
      },
      "yaxis":"y",
      "connectgaps":true,
      "measurementGroupId":18
   },
   {
      "type":"scatter",
      "x":[...],
      "y":[...],
      "hovertemplate":"%{x}<br>%{y:.2f} %{text}<extra></extra>",
      "text":[...],
      "name":"m3",
      "marker":{
         "color":"#3c3c3c",
         "size":1,
         "opacity":1
      },
      "line":{
         "width":1
      },
      "yaxis":"y2",
      "connectgaps":true,
      "measurementGroupId":8
   },
   {
      "type":"scatter",
      "x":[...],
      "y":[...],
      "hovertemplate":"%{x}<br>%{y:.2f} %{text}<extra></extra>",
      "text":[...],
      "name":"kWh",
      "marker":{
         "color":"#2fb5ea",
         "size":1,
         "opacity":1
      },
      "line":{
         "width":1
      },
      "yaxis":"y3",
      "connectgaps":true,
      "measurementGroupId":2
   }
]

Layout配置 #

{
   "title":{
      "text":"Time Series",
      "font":{
         "color":"#3dcd58",
         "family":"Nunito-Regular",
         "size":18
      },
      "xanchor":"left",
      "x":0
   },
   "font":{
      "color":"#333",
      "family":"Nunito-Regular"
   },
   "dragmode":"select",
   "autosize":true,
   "margin":{
      "l":20,
      "r":15,
      "b":30,
      "t":30
   },
   "plot_bgcolor":"#ffffff",
   "showlegend":true,
   "legend":{
      "x":0,
      "bgcolor":"rgba(255,255,255,0.3)"
   },
   "xaxis":{
      "range":[
         1664845980000,
         1699440540000
      ]
   },
   "hovermode":"closest",
   "yaxis":{
      "showticklabels":true,
      "side":"left",
      "tickfont":{
         "color":"#89d300"
      },
      "range":[
         2.133101851851852,
         31.59375
      ],
      "name":"°C"
   },
   "yaxis2":{
      "showticklabels":true,
      "side":"right",
      "overlaying":"y",
      "tickfont":{
         "color":"#3c3c3c"
      },
      "range":[
         -1328.6000000000001,
         27900.6
      ],
      "name":"m3"
   },
   "yaxis3":{
      "showticklabels":true,
      "side":"left",
      "position":0.85,
      "overlaying":"y",
      "tickfont":{
         "color":"#2fb5ea"
      },
      "range":[
         -948.1500000000001,
         41163.15
      ],
      "name":"kWh"
   }
}

布局构建代码 #

var layout = {
    title: {
        text: 'Time Series',
        font: {
            color: "#3dcd58",
            family: "Nunito-Regular",
            size: 18
        },
        xanchor: "left",
        x: 0
    },
    font: {
        color: "#333",
        family: "Nunito-Regular"
    },
    dragmode: 'select',
    autosize: true,
    margin: {
        l: 20,
        r: 15,
        b: 30,
        t: 30
    },
    plot_bgcolor: '#ffffff',
    showlegend: true,
    legend: {
        x: 0,
        bgcolor: 'rgba(255,255,255,0.3)'
    },
    xaxis: {
        range: [minMaxDateValues[0], minMaxDateValues[1]]
    },
    hovermode: 'closest'
};
                        
...

for (var i = 0; i < visibleDrivers.length; i++) {
    var driver = visibleDrivers[i];
    var yAxisName = 'yaxis' + (i > 0 ? (i + 1) : '');
    var minMax = _.find(minMaxDriverValues, function(values) {
        return values.id === driver.nodeId + '.' + driver.measurementGroupId; 
    });
    if (!minMax) {
        minMaxDriverValues.push({
            id: driver.nodeId + '.' + driver.measurementGroupId,
            yAxis: yAxisName,
            minValue: driver.minValue,
            maxValue: driver.maxValue
        });
    }
    layout[yAxisName] = {
        showticklabels: true,
        side: i % 2 > 0 ? 'right' : 'left',
        position: i < 2 ? undefined : 0.85,
        overlaying: i > 0 ? 'y' : undefined,
        tickfont: { color: driver.color },
        range: driver.measurementGroupId === 2
            ? energyRange
            : [
                minMax ? minMax.minValue : driver.minValue,
                minMax ? minMax.maxValue : driver.maxValue
            ],
        name: driver.unit
    }
}

我们通过side: i % 2 > 0 ? 'right' : 'left'切换轴的左右侧，通过position: i < 2 ? undefined : 0.85设置轴位置，前两个轴显示正常，第三个轴出现异常。

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