raphaeljs 饼图动态值数组变化答案

【问题标题】：raphaeljs pie dynamic value array changeraphaeljs 饼图动态值数组变化
【发布时间】：2012-04-01 17:20:04
【问题描述】：

我用的是Raphael js 饼图插件

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

 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);

我只需要用新值更新饼图，而不是创建新值。

谢谢！

【问题讨论】：

标签： jquery raphael pie-chart

【解决方案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');

    }
}());

【讨论】：

谢谢 - 这正是我需要的。
这就是链接外部文件的美妙之处……我已经更新了小提琴。

【解决方案2】：

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

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

我所做的是将我的数组的一个克隆传递给 piechart() 方法，这样我的数据就不会被 piechart() 函数破坏。

【讨论】：

非常感谢，我花了几个小时解决这个问题，却不明白为什么这个废话不会重画......