Javascript 带有柱形条形图的Ajax动态数据_Javascript_Ajax_Highcharts

Javascript 带有柱形条形图的Ajax动态数据

javascript ajax highcharts

Javascript 带有柱形条形图的Ajax动态数据,javascript,ajax,highcharts,Javascript,Ajax,Highcharts,是否可以运行highcharts列条形图？我已经尝试过好几次了，不幸的是，这并没有真正的方法在不重新加载数据的情况下刷新数据我突然编写了一些伪代码，这是我在工作中使用的方式（我现在不在那里，所以无法获取代码）我是否应该快速启动一个循环并像5000次那样运行，或者延迟5秒？我真的不知道该怎么做 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conten

是否可以运行highcharts列条形图？我已经尝试过好几次了，不幸的是，这并没有真正的方法在不重新加载数据的情况下刷新数据

我突然编写了一些伪代码，这是我在工作中使用的方式（我现在不在那里，所以无法获取代码）

我是否应该快速启动一个循环并像5000次那样运行，或者延迟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调用函数
返回一些值；
>
$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：“列”
},
标题：{
文字：“月平均降雨量”
},
副标题:{
文本：'来源：WorldClimate.com'
},
xAxis：{
类别：[
“一些酒吧”
]
},
亚克斯：{
分:0,，
标题：{
文字：“降雨量（毫米）”
}
},
图例：{
布局：“垂直”，
背景颜色：“#FFFFFF”，
对齐：“左”，
垂直排列：“顶部”，
x:100，
y:70，
浮动：是的，
影子：对
},
工具提示：{
格式化程序：函数（）{
返回“”+
this.x+'：'+this.y+'mm'；
}
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名称:"东京",，
数据：[ajax\u var]
}]
});
});
}, 5000);

将ajax代码放在一个它从ready函数调用的函数中……试试这个

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

}

ajax调用只需获取图表显示的新数据。无需重新绘制整个图表，只需替换系列数据或添加独立点即可。在highcharts网站上有一篇很好的文章介绍了这一点，但他们推荐的ajax代码是：

/**
 * Request data from the server, add it to the graph and set a timeout to request again.
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // Shift if the series is longer than 2.

            // Add the point.
            chart.series[0].addPoint(point, true, shift);

            // Call it again after one second.
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}

在这段代码中，requestData函数每秒调用一次（通过setTimout）。它通过对live-server-data.php的ajax调用获得一个新的数据点，并使用chart.series[0].addPoint将其添加到图表中

如果ajax调用返回整个系列，您将调用chart.series[0].setData来替换entire系列

您唯一需要担心的是，在开始调用addPoint或setData之前，确保已创建图表

   $(function () {
    var chart;
    var list;
    $(document).ready(function() {
        var options = {
            chart: {
               //all chart attr here
                 }
                //other attr
           }
 chart = new Highcharts.Chart(options);
    setInterval(function() {
        $.ajax({
        type: "GET",
        url: "service",
        dataType: "json",
        success: function (data) 
    { 
           chart.series[0].setData(data);
        }
    }),1000); //will set ur data to ajax data every 1 sec
                  if u want to update to existing chart data try addPoint()
});
});