Использование раскрывающегося списка метода анимации Plotly JS UpdateMenu для анимации между трассировками - PullRequest
Новая
       2

Использование раскрывающегося списка метода анимации Plotly JS UpdateMenu для анимации между трассировками

1 голос
/ 05 мая 2020

Я пытаюсь анимировать графическую диаграмму, используя метод UpdateMenu .

Я не могу заставить его вернуться к исходной трассе.

In В приведенном ниже примере я могу изменить диаграмму на трассировку 2. Но это не go обратно на трассу 1.

Вот пример кода моей проблемы 

//myPlot = document.getElementById('chart')
var trace1 = {
  x: [1],
  y: [1],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 1',
}

var trace2 = {
  x: [.5],
  y: [.5],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 2',
}

var frames = [{
    name: 'trace 1',
    data: [trace1]
  },
  {
    name: 'trace 2',
    data: [trace2]
  }
]
console.log(frames)
var layout = {
  yaxis: {
    range: [0, 2]
  },
  xaxis: {
    range: [0, 2]
  },
  updatemenus: [{
    buttons: [{
        method: 'animate',
        args: [
          ['trace 1']
        ],
        label: 'One'
      },
      {
        method: 'animate',
        args: [
          ['trace 2']
        ],
        label: 'Two'
      }
    ]
  }]
}

Plotly.newPlot("chart", [trace1], layout).then(function() {
  Plotly.addFrames('chart', frames);
});
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Media Bias</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- <link rel="stylesheet" type="text/css" href="static/css/Index_Style.css">
     -->
</head>

<div Id='chart'>

</div>

и модифицированный пример кода их рабочего образца.

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

1 Ответ

0 голосов
/ 05 мая 2020

По какой-то причине нельзя поместить трассу в список данных (внутри переменной frame). Вам необходимо установить значения x и y данных вручную. 

//myPlot = document.getElementById('chart')
var trace1 = {
  x: [1],
  y: [1],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 1',
}

var trace2 = {
  x: [.5],
  y: [.5],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 2',
}

var frames = [{
    name: 'trace 1',
    data: [{
      x: trace1.x,
      y: trace1.y
    }]
  },
  {
    name: 'trace 2',
    data: [{
      x: trace2.x,
      y: trace2.y
    }]
  }
]
//console.log(frames)
var layout = {
  yaxis: {
    range: [0, 2]
  },
  xaxis: {
    range: [0, 2]
  },
  updatemenus: [{
    buttons: [{
        method: 'animate',
        args: [
          ['trace 1']
        ],
        label: 'One'
      },
      {
        method: 'animate',
        args: [
          ['trace 2']
        ],
        label: 'Two'
      }
    ]
  }]
}

Plotly.newPlot("chart", [trace1], layout).then(function() {
  Plotly.addFrames('chart', frames);
});
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Media Bias</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- <link rel="stylesheet" type="text/css" href="static/css/Index_Style.css">
     -->
</head>

<div Id='chart'>

</div>
...