如何隐藏多个轴？

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

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

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

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

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

Answer 2

您可以收听 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'

如何隐藏多个轴？

How to hide multiple axes plotly?

javascript

plotly