如何在 Plotly 中將 position 圖例放在頂部而不是底部？

Question

我想在圖表頂部顯示圖例，但在標題下方。 我找了API，沒有找到任何相關的改變position，只是設置方向。

 var myData = [ { fcst_valid_local: "2013-01-04 22:23:00", pop: 20, temp: 38, }, { fcst_valid_local: "2013-02-04 22:23:00", pop: 15, temp: 39, }, { fcst_valid_local: "2013-03-04 22:23:00", pop: 2, rh: 70, } ]; var data = [ { x: myData.map(d => d.fcst_valid_local), y: myData.map(d => d.temp), type: 'line' }, { x: myData.map(d => d.fcst_valid_local), y: myData.map(d => d.pop), type: 'bar', yaxis: 'y2' } ]; var layout = { title: 'Daily Forecast', yaxis: { autorange: true, range: [0, 100], }, yaxis2: { range: [0, 100], side: 'right', overlaying: 'y', type: 'linear' }, legend: {orientation: 'h', side: 'top'} }; Plotly.newPlot('myDiv', data, layout);

 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>

Answer 1

您可以通過設置其x和y值來 position legend 。 對於您的圖表，它將類似於：

legend: {x: 0.4, y: 1.2}

 var myData = [ { fcst_valid_local: "2013-01-04 22:23:00", pop: 20, temp: 38, }, { fcst_valid_local: "2013-02-04 22:23:00", pop: 15, temp: 39, }, { fcst_valid_local: "2013-03-04 22:23:00", pop: 2, rh: 70, } ]; var data = [ { x: myData.map(d => d.fcst_valid_local), y: myData.map(d => d.temp), type: 'line' }, { x: myData.map(d => d.fcst_valid_local), y: myData.map(d => d.pop), type: 'bar', yaxis: 'y2' } ]; var layout = { title: 'Daily Forecast', yaxis: { autorange: true, range: [0, 100], }, yaxis2: { range: [0, 100], side: 'right', overlaying: 'y', type: 'linear' }, legend: {x: 0.4, y: 1.2} }; Plotly.newPlot('myDiv', data, layout);

 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="myDiv" style="width: 480px; height: 400px;">

Answer 2

添加：

layout(legend = list(orientation = 'h', xanchor = "center", x = 0.5, y= 1)) 

使圖例適合水平、中間和頂部。