Plotly JS：动画饼图答案

【问题标题】：Plotly JS: Animate pie chartPlotly JS：动画饼图
【发布时间】：2021-04-12 01:17:18
【问题描述】：

改变饼图数据时可以实现流畅的动画吗？我之前用散点图、指标和条形图做过类似的事情，但我的解决方案不适用于饼图。

那么，使用 plotly js 可以实现流畅的动画吗？饼图还不支持吗？

Codepen 示例： https://codepen.io/michaelkonstreu/pen/yLaEBJr

绘制图表：

function drawChart() {
  generateRandomValues();
  let graph = document.querySelector('#graph');
  let plotWidth = graph.getBoundingClientRect().width;
  let plotHeight = graph.getBoundingClientRect().height;
  let data = [{
    type: "pie",
    values: VALUES,
    labels: LABELS,
    textinfo: 'percent',
    automargin: true,
  }];
  let layout = {
    paper_bgcolor: 'rgba(0,0,0,0)',
    plot_bgcolor: 'rgba(0,0,0,0)',
    width: plotWidth,
    height: plotHeight,
    margin: { "t": 0, "b": 0, "l": 0, "r": 0 },
    showlegend: true,
  }
  Plotly.newPlot(graph.id, data, layout, { displaylogo: false, responsive: true, staticPlot: true });
 }

动画图表：

function updateChart(){
  generateRandomValues();
  Plotly.animate('graph', {
        data: [
            {
                y: VALUES,
                x: LABELS,
            }
        ],
        traces: [0]
    },
        {
            transition: {
                duration: 750, easing: 'cubic-in-out'
            }
        }
    )
}

【问题讨论】：

标签： javascript plotly.js

【解决方案1】：

有文档说明（即时更新）

目前，只有分散的轨迹可以从一个平滑过渡状态到下一个。其他走线与框架和兼容动画，但会立即更新。

https://plotly.com/javascript/animations/

【讨论】：

欢迎来到 Stackoverflow！本网站不赞成仅提供链接的答案。