更新gRaphael折线图列值

时间:2012-11-27 20:35:15

标签: javascript jquery raphael graphael

我有一个gRaphael折线图,我使用下面的函数点击更新,我遇到的问题是,当我尝试设置列值时,它不会生效。像这样......

         var iniGraph   = Raphael("graph"),
        chart = iniGraph.linechart(
                0,5,
                $('#graph').width(),$('#graph').height(),
                xVals,yVals,
                { nostroke: false, symbol: ["circle",""], width: 1.5, smooth: true, shade: true, colors: ['#008cc2', '#7500c6'] }
         ).hoverColumn(function(){
                // AFTER UPDATE THESE VALUES STILL REMAIN UNCHANGED
                console.log(this.values[0]+" | "+this.values[1]);
         },function(){
                // do nothing
         });


    function animateChart(graph,curChart,newX,newY)
    {
        // generate the new chart
        var newChart = graph.linechart(
                0,5,
                $('#graph').width(),$('#graph').height(),
                newX,
                newY,
                { nostroke: false, symbol: ["circle",""], width: 1.5, smooth: true, shade: true, colors: ['#008cc2', '#7500c6'] }
         );

        // THIS DOES NOT WORK, THE ORIGINAL VALUES REMAIN AFTER UPDATE 
        curChart.eachColumn(function(){
            this.values[0] = 12341234;
            this.values[1] = 12341234;
        });

        // animate the symbols
        $.each(curChart.symbols[0],function(i,symbol){
            symbol.animate({ cx: newChart.symbols[0][i].attr("cx"),cy: newChart.symbols[0][i].attr("cy") }, 200);
        });

        // animate the lines
        $.each(curChart.lines,function(i,line){
            line.animate({ path: newChart.lines[i].attr("path") }, 200);
        });

        // remove the new chart
        newChart.remove();
    }

我创建一个初始图并创建折线图,然后使用animateChart函数将折线图设置为动画/更新为新值,我遇到的问题是在悬停时,值仍然存在animateChart函数运行后没有改变,所以我坚持使用图表的初始值,这是不理想的,因为我必须让列值更新为我指定的新值。

基本上,我在动画/更新折线图时如何更新列值?

我的绳子结束了...谢谢。

0 个答案:

没有答案