如何將Plotly.js圖例移出第二個y軸

Plotly.js默認使圖例覆蓋第二個y軸。這裏發生的事情是他們自己的代碼筆例如： https://codepen.io/plotly/pen/36d6c70e8fa17e471fa68788abbed90f 如何將Plotly.js圖例移出第二個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);

我不能讓傳說更向右移動。我嘗試調整圖上的邊距/填充，圖例的x位置，圖例上的邊距/填充，div的整體大小以及圖例的方向。

關於圖例取向的話題，我可能會將圖例置於圖解下面來解決這個問題。但是，我也遇到了麻煩。這裏是我的傳說佈局代碼：

legend: {orientation: 'h', 
     y: -0.17, 
     x: 0, 
     font: { 
      family:'Roboto', 
      size: 10, 
      color: 'rgb(54, 54, 54)'} 
     },

，並在這裏是我的圖形看起來像：

很明顯，有大量的代碼在這裏失蹤，這是沒有問題的工作示例，但方向並未改變爲橫向。

來源

2017-07-25 Murenrb

這是相當多的痕跡。我認爲最好的選擇仍然是在陰謀之下，但如果你不能這樣做，請查看我編輯的答案。 –

我沒有改變爲水平的問題是通過使用最近的圖解庫來解決的。 – Murenrb

把它放在劇情下怎麼樣？您也可以通過更改legend屬性中的x和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' 
 
    }, 
 
    legend: { 
 
    y: 1, 
 
    x: 1.1, 
 
    bgcolor: 'transparent', 
 
    } 
 
}; 
 

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

<head> 
 
    <!-- Plotly.js --> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="myDiv" style="width: 480px; height: 400px;"> 
 
    <!-- Plotly chart will be drawn inside this DIV --> 
 
    </div> 
 
    <script> 
 
    <!-- JAVASCRIPT CODE GOES HERE --> 
 
    </script> 
 
</body>

來源

2017-07-25 23:24:32

我想過這個。奇怪的是，我無法讓我的實際代碼生成水平方向的圖例。我正在更新我的問題以包含屏幕截圖。當然，你需要的是 – Murenrb

。你知道嗎，每個格式化輸入的可接受範圍都有一個巨大的列表嗎？我嘗試了各種整數，但我不知道爲什麼1.1沒有出現在我身上。我也認爲水平定位會很棒，但我真的無法實現。 – Murenrb

@Murenrb如果你有更多關於圖例的問題，請查看https://plot.ly/javascript/legend/有關於傳說的很多信息。 –

如何將Plotly.js圖例移出第二個y軸

回答

相關問題