Анимированный график графика солнечных лучей при обновлении данных - PullRequest
Новая
       5

Анимированный график графика солнечных лучей при обновлении данных

0 голосов
/ 26 февраля 2020

Я использую plotly для печати графика солнечных лучей.

Я бы хотел, чтобы график обновлялся при обновлении данных. 

var data = [{
  type: "sunburst",
  labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
  parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
  values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
  outsidetextfont: {size: 20, color: "#377eb8"},
  leaf: {opacity: 0.4},
  marker: {line: {width: 2}},
}];

var layout = {
  margin: {l: 0, r: 0, b: 0, t: 0},
  width: 500,
  height: 500
};


Plotly.newPlot('myDiv', data, layout);
<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Я знаю, что для обновления графика лучше использовать `Plotly.react ('myDiv', data, layout);

Но когда Я обновляю свой график, изменения появляются без анимации перехода.

Есть ли способ аниме-графика изменения данных?

Если нет, есть ли другая альтернатива? (Я использую Angular)

1 Ответ

1 голос
/ 27 февраля 2020

Проверьте Plotly.animate.

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

Я обновил ваш фрагмент, чтобы включить демонстрацию анимации periodi c чуть ниже. 

var data = [{
  type: "sunburst",
  labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
  parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
  values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
  outsidetextfont: {size: 20, color: "#377eb8"},
  leaf: {opacity: 0.4},
  marker: {line: {width: 2}},
}];

var layout = {
  margin: {l: 0, r: 0, b: 0, t: 0},
  width: 500,
  height: 500
};


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

// Periodically animate chart by reversing current value collection
setInterval(function () {
  var values = data[0].values.slice().reverse();
  Plotly.animate('myDiv', {
    data: [{ values: values }],
  }, {
    transition: {
      duration: 500,
      easing: 'cubic-in-out',
    },
    frame: {
      duration: 500,
    }
  });
}, 2000);
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div id='myDiv'></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...