jquery - raphaeljs 饼图动态值数组变化

Question

我使用Raphael js饼图插件

http://raphaeljs.com/pie.html

我需要每 5 秒刷新一次图表值数组(需要重新绘制饼图) - 我的问题是以下代码还创建新的饼图，而不仅仅是用新值更新现有饼图 - 简而言之:我不能仅传递“值”数组。

 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

一个明智的方法是仅初始化 Canvas 一次。当您想要重新绘制饼图时，请清除 Canvas (请参阅文档中的 Paper.clear() )并在同一 Canvas 元素上再次调用ieChart。

示例: 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');

    }
}());