2

以下の関数を使用してクリックで更新する 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関数の実行後に値が変更されないことです。列の値を指定した新しい値に更新する必要があるため、理想的ではありません。

基本的に、折れ線グラフをアニメーション化/更新するときに列の値を更新するにはどうすればよいですか?

私はちょっとロープの終わりにいます...ありがとう。

4

0 に答える 0