我有一个 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
函数运行后值保持不变,所以我坚持使用图表的初始值,这并不理想,因为我必须让列值更新为我指定的新值。
所以基本上,当我动画/更新折线图时如何更新列值?
我有点走投无路了……谢谢。