Question

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)'}
        },

这是我的图表的样子：

显然，这里缺少很多代码，这不是问题的一个有效例子，但方向并没有改变为水平。

Answer 1

把它放在情节下怎么样？您也可以通过更改x属性中的y和legend值来调整其位置。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

我的大多数文档也有同样的问题-他们告诉您该属性的用途，但不能告诉您该属性的可接受值以及每个属性的用途。您可以通过以下操作将图例设置为水平：

layout:{
  orientation: "h"
}

如何从第二个y轴移动Plotly.js图例

2 个答案: