如何将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轴

回答

相关问题