Question

有人能告诉我jqplot中的animate和animate replot选项是否与饼图和圆环渲染器配合使用？它看起来不像是一个兼容的选项，但无法找到任何特定的文档。

理想情况下，我需要的是饼图使用新数据在replot上制作动画。如果animate选项不起作用，可以通过以与此线程类似的方式按顺序加载新数据而不是一次加载来完成：

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/

我认为必须有办法将两者结合起来，以便以动画/延迟的方式加载被替换的数据，并能够控制时间。

非常感谢任何帮助。

非常感谢

理查德

Answer 1

在添加新数据之前，只需清除原始数据即可。例如。像这样：

{{1}}

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

jqplot动画饼图和圆环图

1 个答案: