Несколько X-Axes in Plotly

Question

В настоящее время я пытаюсь построить два разных набора данных для создания визуализации данных, которые мы обрабатываем.

По существу, один набор данных будет поперечным сечением реки (ширина, глубина).

Другой набор данных состоит из уровней воды и времени эти уровни были записаны. (Глубина, время)

Я в настоящее время черчения каждый в отдельных графах, но нужно сделать сюжет Наложение данных уровня воды на данных поперечного сечения. Для этого потребуется несколько X-Axes, так как диапазон не совпадает. Возможно ли это в сюжете? Я видел видеоролик о том, что кто-то использует редактор данных Plotly, но не нашел многого с точки зрения использования их API.

Кроме того, я знаю, что один набор данных находится в метрах, другой - в футах - эти данные используются в качестве примера, конечный результат будет отображаться в футах.

Answer 1

Это может быть возможно с использованием subplots. Вот пример с общей осью Y и независимыми осями X.

var trace1 = { 
    x: [1, 2, 3], 
    y: [4, 3, 2], 
    xaxis: 'x2', 
    type: 'scatter', 
    name: 'trace1' 
}; 

var trace2 = { 
    x: [200, 300, 400], 
    y: [2, 3, 4], 
    xaxis: 'x3', 
    type: 'scatter', 
    name: 'trace2' 
}; 

var data = [trace1, trace2]; 

var layout = { 
    xaxis2: { 
    domain: [0.0, 0.45] 
    }, 
    xaxis3: { 
    domain: [0.55, 1] 
    } 
}; 

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

Answer 2

@emackey ответ не производит несколько осей x. Это рабочий синтаксис, который показывает два разных набора данных на одном и том же графике с одной осью y и двумя x-осями.

var trace1 = { 
     x: [1, 2, 3], 
     y: [40, 50, 60], 
     name: 'yaxis data', 
     type: 'scatter' 
}; 

var trace2 = { 
     x: [12, 13, 14], 
     y: [4, 5, 6], 
     name: 'yaxis2 data', 
     xaxis: 'x2', 
     type: 'scatter' 
}; 

var data = [trace1, trace2]; 

var layout = { 
     yaxis: {title: 'yaxis title'}, 
     xaxis2: { 
      title: 'xaxis2 title', 
      titlefont: {color: 'rgb(148, 103, 189)'}, 
      tickfont: {color: 'rgb(148, 103, 189)'}, 
      overlaying: 'x', 
      side: 'top' 
     } 
}; 

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

Это произведет следующие graph.This link помогут вам для дальнейшей документации.