jquery - 异步数据获取后更新 jquery.sparkline

发布于 2024-12-09 05:33:33 字数 1735 浏览 0 评论 0原文

背景

我正在使用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); }
});

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

选项 我一直在研究观察者模式的变体来监视数组的更改,并(不确定如何)说服 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
}

Background

i'm using jquery.sparkline to produce Pie Charts. The data for the Pie Chart is contained in an array.

When the page is first loaded a web-service is called (using .ajax) to get the data, the callback specified there takes the received data and updates the array associated with the pie chart.

That same update process is invoked when a dropdown on the screen changes value.

Situation

If I set the .ajax call to asynch=false this all works fine.

If I set the .ajax call to asynch=true the results shown in the pie are always 'one refresh behind'. By this I mean there's no pie initially and then when the dropdown is changed the pie is rendered as it should have been initially.

Code

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

Help?
Anyone out there recognise this problem ?

Options
I've been looking at variations on the Observer pattern to monitor a change to the array and the (not sure how) persuade the jquery.sparkline object to redraw itself but this seems crazy and I'm sure I must be overlooking something much more straightforward.



Thanks to Gareth and his sample code I was able to see what I was doing wrong (which wasn't anything to do with jquery.sparkline.

I had some functions like this :

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
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

星軌x 2024-12-16 05:33:33

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

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

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

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

I'd need to see a more complete example to determine where the problem is, but using async: true works fine for me.

Here's a link to a very simple working example: http://omnipotent.net/jquery.sparkline/ajaxtest.html

The source for the ajax side is here:
http://omnipotent.net/jquery.sparkline/ajax.phps

If your chart is hidden (ie. display: none) at the time .sparkline() is actually called then you may need to call $.sparkline_display_visible() at the point the chart is made visible to force it to be rendered at that point.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文