динамическое изменение массива пирога 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

Разумным подходом будет инициализация холста только один раз. Если вы хотите перерисовать круговую диаграмму, очистите холст (см. Paper.clear () в документах) и снова вызовите pieChart для того же элемента canvas.

Пример: 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 ().