Plotly.js-如何使两个y轴与单个x轴关联？

Question

如何使两个y轴与单个x轴关联？在图像中，我们看到每个y轴都有自己的x轴。我已经在yaxis2布局中使用了anchor ='x'，但没有任何改变。

在使用的布局下方：

(object,)

Answer 1

您可以尝试设置每个跟踪的xaxis和yaxis值。可行

 var trace1 = {
      x:x,
      y:y1,
      type:'scatter',
      xaxis:'x',
      yaxis:'y'
    }
    var trace2 = {
      x:x,
      y:y2,
      type:'scatter',
      xaxis:'x',
      yaxis:'y2'
    }

Example

  

有时网格线未调整。当不同的yaxis发生   范围是不同的。   因此，我们可以通过在每个y轴上设置相同的range来解决此问题

 var Yvalues = y1.concat(y2); // Merge y values
 var yMax = Math.max.apply(Math, Yvalues);
 var yMin = Math.min.apply(Math, Yvalues);
 var Yrange = [yMin,yMax];//Set range

 var layout  = {
     .......
     .......
    yaxis: {
       range:Yrange //Set range
   },
    yaxis2 : {
        range:Yrange, //Set range
        overlaying:'y' // Set overlaying value
    }
}