异步数据提取后更新jquery.sparkline

update jquery.sparkline after async data fetch

本文关键字:jquery sparkline 更新 数据 提取 异步      更新时间:2023-09-26

背景

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

当页面第一次加载时,会调用一个web服务(使用.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); }
});

帮助有人认识到这个问题吗?

选项我一直在观察Observer模式的变化,以监测数组的变化,以及(不确定如何(说服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((时是隐藏的(即display:none(,则您可能需要在图表可见时调用$.sparkline_display_visible((,以强制在该点进行渲染。