jqplot 动画饼图和圆环图

Question

谁能告诉我 jqplot 中的 animate 和 animate replot 选项是否适用于饼图和圆环渲染器？看起来不像是与此呈现的兼容选项，但找不到任何特定文档。

理想情况下，我需要的是让饼图在使用新数据重新绘制时进行动画处理。如果动画选项不起作用，可以通过顺序加载新数据来完成，而不是一次全部加载，类似于此线程：

JQPlot auto refresh chart with dynamic ajax data

我遇到的问题是这个示例添加到现有数据，而不是替换它，我无法让它工作。

这是我使用该示例的地方：

var storedData = [3, 7];

var plot1;
renderGraph();

$('.change1').click( function(){
doUpdate();
});
$('.change2').click( function(){
doUpdate2();
});

function renderGraph() {
if (plot1) {
    plot1.destroy();
}

var plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: {
  renderer:$.jqplot.DonutRenderer,
  rendererOptions:{
  sliceMargin: 3,
  startAngle: -90,
  showDataLabels: true,
  dataLabels: 'value'
  }
}
});
}

var newData = [9, 1, 4, 6, 8, 2, 5];
function doUpdate() {
if (newData.length) {
    var val = newData.shift();

        var newVal = new Number(val); /* update storedData array*/
        storedData.push(newVal);
        renderGraph();

        setTimeout(doUpdate, 1)

} else {
    log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}

http://jsfiddle.net/p9SbP/106/

我目前有这个来加载新数据和替换旧数据。如您所见，声明的动画选项不会影响重绘：

var storedData = [3, 7];
var newData = [9, 1, 4, 6, 8, 2, 5];

$('.change1').click( function(){
plot1.replot({data: [newData], resetAxes: true,});
});

var plot1 = $.jqplot('chart1', [storedData], {animate: true, animateReplot: true, seriesDefaults: {

  renderer:$.jqplot.DonutRenderer,

  rendererOptions:{
   animation: {
                show: true
            },

  sliceMargin: 3,
  startAngle: -90,
  showDataLabels: true,
  dataLabels: 'value'
  }
}
});

http://jsfiddle.net/p9SbP/107/

我在想必须有一种方法可以将两者结合起来，以便替换的数据以 animated/delayed 的方式加载，并且能够控制时间。

非常感谢任何帮助。

非常感谢

理查德

Answer 1

在添加新数据之前，只需清除您拥有的原始数据。例如。像这样：

var wasCleared = false;
function doUpdate() {
    // Empty existing data
    if (!wasCleared) {
        storedData.length = 0;
        wasCleared = true;
    }
...

这是您的第一个 fiddle 更新：http://jsfiddle.net/dekkard/6x82om3x/

jqplot 动画饼图和圆环图

jqplot animate pie chart and donut chart

jquery

animation

jqplot