时间戳

首页 > 解决方案 > 更新数据时动画绘制旭日图

javascript - 更新数据时动画绘制旭日图

问题描述

我正在使用 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);

但是当我更新我的图表时，变化不会出现过渡动画。

有没有办法在数据变化上绘制动画图表？

如果没有，还有其他选择吗？（我正在使用角）

标签： javascriptangularchartsplotly

解决方案

退房Plotly.animate。

官方文档中有一个动画部分专门介绍如何为您的情节设置动画。

我已经更新了你的代码片段，在下面包含了一个周期性动画的演示。

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>

推荐阅读