Несколько осей X в Plotly

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

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

График поперечного сечения

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

График данных об уровне воды

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

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


javascript data-visualization plotly
person Chris    schedule 16.11.2015    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Ответ @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);

Это создаст следующий график. Эта ссылка поможет вам получить дополнительную документацию.

Это создаст следующий график

person HesamDadafarin    schedule 03.01.2017

arrow_upward
1
arrow_downward

Это возможно с помощью подзаголовков. Вот пример с общей осью 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);
person emackey    schedule 21.11.2015