измените сюжетно несколько осей на Dynami c несколько осей javascript - PullRequest
Новая
       52

измените сюжетно несколько осей на Dynami c несколько осей javascript

0 голосов
/ 25 марта 2020

Вот код 

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);

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

output image

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

1 Ответ

0 голосов
/ 25 марта 2020

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

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

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

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

См. этот кодовый блок для примера того, как можно динамически добавлять оси y: https://jsfiddle.net/gx9z8srj

...