изменить график нескольких осей на динамические несколько осей javascript

Вот код

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

var trace2 = {
  x: [2, 3, 4],
  y: [4, 5, 6],
  name: 'yaxis2 data',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example',
  yaxis: {title: 'yaxis title'},
  yaxis2: {
    title: 'yaxis2 title',
    titlefont: {color: 'rgb(148, 103, 189)'},
    tickfont: {color: 'rgb(148, 103, 189)'},
    overlaying: 'y',
    side: 'right'
  }
};

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

Я пробовал это, и он работает хорошо, как показано в примере.
Но есть одна проблема. У меня есть несколько графиков, и, возможно, потребуется построить их по двум осям, а иногда и по трем или более. Это будет зависеть от ситуации и полученных данных. Поэтому я попытался изменить приведенный выше сценарий, чтобы он давал мне динамический способ построения данных по осям.

Я сделал что-то вроде этого:

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

var trace2 = {
  x: [2, 3, 4],
  y: [4, 5, 6],
  name: 'yaxis2 data',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example',
  yaxis: [{title: 'yaxis title'},{
    title: 'yaxis2 title',
    titlefont: {color: 'rgb(148, 103, 189)'},
    tickfont: {color: 'rgb(148, 103, 189)'},
    overlaying: 'y',
    side: 'right'
  }]
};

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

Но мне он показывает только один сюжет. Вот изображение:

выходное изображение

Не знаю, почему я получаю только один сюжет, а где второй. Легенды показывают два графика.
Пожалуйста, дайте мне знать, как я могу написать правильный запрос для такого типа ситуации.


person Jaffer Wilson    schedule 25.03.2020    source источник


Ответы (1)


Возможно, я не понимаю ваш вопрос, но, насколько я понимаю, в вашем втором фрагменте кода нет ничего динамичного. Я ожидал, что оси y будут создаваться динамически в зависимости от массива данных.

Динамические оси y немного сложны в плане графика, потому что для каждой добавляемой оси вам нужно вручную сжимать область графика, а затем добавлять смещение к оси, чтобы отобразить ее в только что созданном пустом пространстве (при условии, что все оси вы добавить слева):

yaxis2.position = 0.1
xaxis.domain = [0.1, 1]

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

В этом коде показан пример динамического добавления осей Y: https://jsfiddle.net/gx9z8srj

person mit    schedule 25.03.2020
comment
Спасибо за ваш ответ. Но я не пытаюсь добавлять данные. Вместо этого просто хочу заменить данные графика другой оси. Скажите yaxis2 - person Jaffer Wilson; 25.03.2020
comment
Извините, но я не понимаю вашего вопроса. Не могли бы вы подробнее описать, чего вы пытаетесь достичь? Желательно с примерами до - ›после. - person mit; 25.03.2020
comment
Конечно, дай мне пару минут. - person Jaffer Wilson; 25.03.2020
comment
Позвольте мне вам это объяснить. Вы видите, что первый код отображает две строки. Я хочу отобразить две строки. Надеюсь, это понятно. Я хочу, чтобы в линиях использовалась разница по оси Y. Надеюсь, это понятно. Но проблема, с которой я столкнулся, связана с использованием yaxis и yaxis2. Я не знаю, будут ли данные, которые я получу, относиться к двум или трем строкам .. Следовательно, я не могу использовать yaxis2. поэтому мне нужно что-то, что поможет мне построить две разные линии на двух разных осях Y, используя plotly. Но я не хочу использовать обозначение yaxis2, так как это жестко закодирует график только для двух строк. Надеюсь, я понимаю. - person Jaffer Wilson; 25.03.2020
comment
Если вы все еще не понимаете, то у меня не осталось вариантов для объяснения. Прошу прощения, если это все еще не имеет смысла. - person Jaffer Wilson; 25.03.2020
comment
К сожалению, параметр yaxis в plotly не поддерживает массивы, поэтому использование yaxis2, yaxis3 и т. Д. - ваш единственный вариант добавления нескольких осей. Вам нужно будет добавить yaxis2 динамически, в зависимости от длины вашего массива данных, как это делается в jsfiddle. (Надеюсь, вы видели в jsfiddle, что новые оси добавляются, когда вы нажимаете кнопку «Добавить новую ось».) - person mit; 25.03.2020