背景

我正在使用 jquery.sparkline生产Pie Charts .饼图的数据包含在一个数组中。

当页面首次加载时,调用网络服务(使用 .ajax)来获取数据,那里指定的回调获取接收到的数据并更新与饼图关联的数组。

当屏幕上的下拉菜单更改值时,将调用相同的更新过程。

情况

如果我将 .ajax 调用设置为 asynch=false,一切正常。

如果我将 .ajax 调用设置为 asynch=true,则饼图中显示的结果总是“落后一次刷新”。我的意思是,最初没有饼图,然后当下拉菜单发生变化时,饼图呈现为最初应该呈现的样子。

代码

$.ajax({ 
    type: "GET", 
    contentType: "application/json; charset=utf-8", 
    url: requestURL, 
    async:   true , 
    success: function (data) { successCallback(data); }, 
    error: function (data) { failureCallback(data); } 
}); 

帮忙? 那里有人认识到这个问题吗?

选项 我一直在研究观察者模式的变体以监视数组的变化,并且(不确定如何)说服 jquery.sparkline 对象重绘自身,但这看起来很疯狂,我确定我必须忽略更多的东西直截了当。



感谢 Gareth 和他的示例代码,我能够看到我做错了什么(这与 jquery.sparkline 没有任何关系。

我有一些这样的功能:

function RefreshPieChart(){ 
    //First call managePieDataFetch()  
    //to kick off the web-service request 
 
    managePieDataFetch(); 
 
    //now reinitialise the jquery.sparkline 
    //pie charts on the basis that the  
    //array variable initialised in  
    //pieDataFetchCallBack() has the newest  
    //data in it. 
    // 
    //.... It hasn't ! 
} 
function managePieDataFetch(){ 
    //invoke the .ajax call and  
    //provide function pieDataFetchCallBack() as  
    //a call back function 
} 
function pieDataFetchCallBack(){ 
    //post process the data 
    //returned from a successful 
    //ajax call. Place the results 
    //into an array variable at 
    //script scope 
} 

请您参考如下方法:

我需要查看更完整的示例以确定问题出在哪里,但使用 async: true 对我来说效果很好。

这是一个非常简单的工作示例的链接:http://omnipotent.net/jquery.sparkline/ajaxtest.html

ajax 端的源代码在这里: http://omnipotent.net/jquery.sparkline/ajax.phps

如果您的图表在实际调用 .sparkline() 时处于隐藏状态(即显示:无),那么您可能需要在图表可见时调用 $.sparkline_display_visible() 以强制渲染它那时。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!