如何在 Plotly.js Javascript 中保持多个 y 轴在两侧(左右两侧)具有相同的 y 轴值?

时间:2021-01-16 07:56:09

标签: plotly plotly.js

我尝试了一个使用 Plotly.js 创建条形图的示例

这是我的场景。我需要 2 条有一定限制的跟踪,而且我还必须在右侧显示相同的 y 轴。使用现有参考,很容易在另一侧添加另一个 y 轴,我做到了。但我不能让双方的价值观都一样。有办法吗?

以下是我试过的 sample code

HTML

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JS

var trace1 = {
  x: [1, 2, 3],
  y: [10, 6, 15],
  type: 'bar'
};

var trace2 = {
  x: [1, 2, 3],
  y: [10, 14, 5],
  yaxis: "y2",
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {
  barmode: 'stack',
  yaxis: {},
  yaxis2: {
    titlefont: {},
    tickfont: {},
    side: 'right',
    overlaying: "y",
    type: "linear",
    zerolinecolor: "#DEDEDE"
  }
};

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

请有人帮我解决这个符合我期望的场景。

0 个答案:

没有答案