javascript - Ajax 动态数据与柱形条形图

标签 javascript ajax highcharts

是否可以运行 highcharts 柱状条形图?我已经尝试了几次,不幸的是,这不是在不重新加载数据的情况下刷新数据的真正方法。

我编写了一些伪代码,这是我在工作中的做法(我现在不在,所以无法获取代码)。

我应该启动一个循环并运行 5,000 次还是延迟 5 秒?我不确定如何继续。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
< your typical ajax call function here
    return some value;
>


$(function () {
    <var ajax_far = ajax_function();>
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Some Bar'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: [{
                name: 'Tokyo',
                data: [ajax_var]

            }]
        });
    });

}, 5000);
        </script>
    </head>
    <body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

最佳答案

将您的 ajax 代码放在它从就绪函数调用的一个函数中...试试这个

$(document).ready(function(){
example();
 setInterval("example()",5000);
}
function example()
{
//ajax code here

}

关于javascript - Ajax 动态数据与柱形条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15515318/

相关文章:

javascript - 通过 AJAX 发送电子邮件 - 显示进度/状态

jQuery 在 IE 中缓存 AJAX 请求,即使缓存 : "false" is set

highcharts - 单击 HighChart 圆环图中的外部切片时,如何获得内部切片?

javascript - 为什么此 Twitter 标准搜索 JSON 响应中没有 'urls' 值?

javascript - div 刷新在 ie8 下不能正常工作

javascript - 图像根据鼠标光标移动

javascript - 哪些 Web 浏览器最容易出现不兼容问题?

javascript - Bootstrap模型ajax

javascript - highchart 更新 plotOptions

php - 有什么方法可以将 Highcharts 与 mPDF 转换器一起使用?