Как синхронизировать масштабирование по двум осям X при масштабировании в Plotly JS - PullRequest
Новая
       37

Как синхронизировать масштабирование по двум осям X при масштабировании в Plotly JS

0 голосов
/ 08 июля 2019

Я пытаюсь нарисовать график в графическом JavaScript, который содержит две линии трассировки на одном участке и другую линию на втором участке.Все они имеют две пропорциональные оси X и имеют независимую ось Y.

https://codepen.io/euankirkhope/pen/OeBBPj

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>
<script>
        var trace1 = {
      x: [0, 10, 20, 30],
      y: [0, 3.3, 4.6, 5.6],
      mode: 'line',
      yaxis: 'y2',
      name: 'Line1'
    };

    var trace2 = {
      x: [0, 10, 20, 30],
      y: [0.15, 6.4, 3.4, 2.5],
      mode: 'line',
      yaxis: 'y2',
      name: 'Line2',
    constrain: 'domain',        
    };

    var trace3 = {
      x: [0, 10, 20, 30],
      y: [0.15, 0.3, -0.15, 0.24],
      mode: 'line',
      yaxis: 'y1',
      name: 'DiffLine'
    };

    var trace4 = {
      x: [0,15],
      y: [0,0],
      mode: 'markers',
      xaxis: 'x2',
      name: 'x2Dummy',
      showlegend: false,
      visible: false
    };

var data = [ trace1, trace2, trace3, trace4 ];

layout = {

        yaxis: {
            domain: [0, 0.4],
            title: 'Diff (mm)',
            fixedrange: true,
            range:[-0.5,0.5]
        },
        yaxis2: {
            domain: [0.45, 1.0],
            title: 'Height (m)'
        },
        xaxis:{
            title: 'Distance (m)',
            range: [0,30],
            ticks: 'inside',   
            dtick: 5,
            showline: true,
        },
        xaxis2:{
            title: 'Distance x2',
            scaleanchor: 'x',
            scaleratio: 2,
            position: 1,
            side: 'top',
            range: [0, 15],
            visible: true,
            ticks: 'inside',
            dtick: 1,
            tick0: 1,
            showline: true,
            showgrid: false
        }
    };
    Plotly.newPlot('graph', data, layout, {});
</script>
</html>

При увеличении масштаба масштабируется только первая ось x, а вторая всегда перемещается в центр оси.

Как можноЯ получаю обе оси X для масштабирования и масштабирования вместе?

...