绘制两个y轴相同位置的零线

Question

我想用 javascript 在绘图图表上绘制两个轴（条形图 + 散点图），但我无法使第二个 y 轴的零基线与第一个轴对齐。

这是当前版本的结果：

右y轴零线（散点线）高于左y轴零线。我想让它们在情节中处于相同的高度，基本上是重叠的。

我这样创建 Plotly 对象：

const trace1 = { x: dates, y: y1, name: 'item', type: 'bar' };
const trace2 = { x: dates, y: y1_cumsum, name: 'Total', yaxis: 'y2', type: 'scatter' };

Plotly.newPlot(MYDIV, [trace1,trace2], {
    margin: {t: 0},
    barmode: 'group',
    hovermode: 'x unified',
    yaxis: {title: 'item', dtick: 1},
    yaxis2: {
        title: 'total',
        overlaying: 'y',
        side: 'right'
    },
    showlegend: true,
    legend: {
        x: 0.25,
        xanchor: 'right',
        y: 1
    }
});

我试图在配置中更改 position，但这只会影响 x 轴位置，不会影响 y 轴的起始位置。我在文档 (https://plotly.com/javascript/reference/layout/yaxis/) 中找不到任何合适的属性来实现这一点。

如何设置第二个y轴的位置与第一个y轴的位置相同？

谢谢。

Answer 1

假设您的数据中没有负值，您可以为一个或两个轴设置layout.yaxis.rangemode = 'tozero'。

const trace1 = {
  x: [3, 4, 5],
  y: [0, 15, 13],
  mode: 'markers+lines',
  type: 'scatter',
  yaxis: 'y2'
};

const trace2 = {
    x: [3, 4, 5],
    y: [1, 0, 3],
    type: 'bar'
};

Plotly.newPlot('myDiv', [trace1,trace2], {
    margin: {t: 0},
    barmode: 'group',
    hovermode: 'x unified',
    yaxis: {title: 'item', dtick: 1},
    yaxis2: {
        title: 'total',
        overlaying: 'y',
        side: 'right',
        rangemode: 'tozero'
    },
    showlegend: true,
    legend: {
        x: 0.25,
        xanchor: 'right',
        y: 1
    }
});

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

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

绘制两个y轴相同位置的零线

plotly two y-axis same position of zero-line

javascript

plotly.js