Plotly.js默认使图例覆盖第二个y轴。这是他们自己的代码笔发生的例子:https://codepen.io/plotly/pen/36d6c70e8fa17e471fa68788abbed90f
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)'}
},
很明显,这里缺少很多代码,这不是问题的一个有效例子,但方向不会改变为水平。
把它放在情节下怎么样?您还可以通过更改x
属性中的y
和legend
值来调整它的位置。
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>
我对他们的大多数文档也有同样的问题 - 他们会告诉你属性是什么,但不是属性的可接受值是什么以及每个属性的作用。您可以通过执行以下操作将图例设置为水平:
layout:{
orientation: "h"
}