如何隐藏多个轴？

Question

我有一个带有多个 y 轴的图，右侧有一个图例。 我只想在图例上选择图形时显示 y 轴。 当我点击图例时，我可以隐藏图表，但轴都是可见的。 如何动态隐藏 y 轴？

var trace1 = {
  x: [1, 2, 3], 
  y: [40, 50, 60], 
  name: 'yaxis data', 
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4], 
  y: [4, 5, 6], 
  name: 'yaxis2 data', 
  yaxis: 'y2', 
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example', 
  yaxis: {title: 'yaxis title'}, 
  yaxis2: {
    title: 'yaxis2 title', 
    titlefont: {color: 'rgb(148, 103, 189)'}, 
    tickfont: {color: 'rgb(148, 103, 189)'}, 
    overlaying: 'y', 
    side: 'right'
  }
};

Plotly.newPlot('myDiv', data, layout);

Answer 1

您可以收听plot_restyle 事件，然后根据您希望代码的灵活性（和复杂性），您可以通过将轴的visible 属性更改为以某种方式隐藏要隐藏的轴false通过

Plotly.relayout('myDiv', { 'yaxis2.visible': false });
// and to undo...
Plotly.relayout('myDiv', { 'yaxis2.visible': true });

对于一个完全动态的示例结帐https://jsfiddle.net/bytesnz/t2y3yaa3/。请注意，所有 yaxis 都有anchor: 'free'

Answer 2

现在我可以自己回答我的问题了。

Plotly.relayout('myDiv', 'yaxis2', null);

从布局中删除“yaxis2”。 如果要删除属于该轴的迹线，请先删除迹线。

 Plotly.deleteTraces('myDiv',[x]);   // 0 delete first trace, 1 second 2 third...
 Plotly.relayout('myDiv', 'yaxis2', null);