以下の関数を使用してクリックで更新する 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
関数の実行後に値が変更されないことです。列の値を指定した新しい値に更新する必要があるため、理想的ではありません。
基本的に、折れ線グラフをアニメーション化/更新するときに列の値を更新するにはどうすればよいですか?
私はちょっとロープの終わりにいます...ありがとう。