raphaeljs饼动态值数组变化

Question

我使用Raphael js饼图插件

http://raphaeljs.com/pie.html

我需要每5秒刷新一次图表值数组（需要重绘饼图） - 我的问题是以下代码创建了新的饼图，而不仅仅是更新现有的新值 - 简短：我不能只传递“value”数组。

 var labels = [],
     values = [60,0],
     i=60,
     j=0
 window.setInterval(function(){
        i--;
        j=j+1;
        if(j>60){
            i=60;
            j=0
        }

        values = [i,j];

       Raphael("holder", 700, 700).pieChart(350, 350, 250, values, labels, "#fff");

 }, 5000);

我只需要用新值更新馅饼，也不要创建新的馅饼。

谢谢！

Answer 1

一种明智的方法是仅将画布初始化一次。如果要重绘饼图，请清除画布（请参阅文档中的Paper.clear（））并再次在同一画布元素上调用pieChart。

示例： http://jsfiddle.net/5DRUh/

(function () {

    var labels = ['value1', 'value2'],
        values = [60, 0],
        i = 60,
        j = 0;

    // Setup the canvas just once
    paper = Raphael('holder', 700, 700);

    window.setInterval(draw, 5000);

    // Draw the piechart when the page loads
    draw();

    function draw(){
        i--;
        j = j + 1;
        if (j > 60) {
            i = 60;
            j = 0;
        }

        values = [i, j];
        paper.clear();
        paper.pieChart(350, 350, 200, values, labels, '#fff');

    }
}());

Answer 2

实际上paper.clear（）可能还不够，因为它对我不起作用。

piechart（）函数将一个值数组作为输入，但在此调用返回后，您的数组不再相同。

我所做的是将我的数组的克隆传递给piechart（）方法，这样我的数据就不会受到piechart（）函数的破坏。