如何隐藏多个轴？

I have a plot with multiple y axes and a legend on right side. I want only to show the y axis when the graph is selected on the legend. I can hide the graphs when i click on the legend , but the axis are all visible. How can i dynamically hide the y axes?

我有一个多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);

2 个解决方案

#1

now i can answer my question myself.

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

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

that deletes the 'yaxis2' from the layout. If you want to delete the traces belong to this axis , then delete the traces first.

从布局中删除'yaxis2'。如果要删除属于该轴的轨迹,请先删除轨迹。

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

#2

You can listen to the plot_restyle event and then depending how flexible (and complex) you want your code to be, you can then somehow make the axis you want to hide hidden by changing the axis' visible property to false through

您可以监听plot_restyle事件,然后根据您希望代码的灵活性(和复杂性),然后通过将轴的可见属性更改为false,可以某种方式使隐藏的轴隐藏起来

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

For a fully dynamic example checkout https://jsfiddle.net/bytesnz/t2y3yaa3/. Note that all the yaxis have anchor: 'free'

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

#1