Question

是否可以运行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>

Answer 1

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

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

}

Answer 2

ajax调用应该只是获取要显示的图表的新数据。无需重绘整个图表，只需替换系列数据或添加单个点即可。这是一篇很好的文章，在这里的高图网站上http://docs.highcharts.com/#preprocessing-live-data，但他们建议的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来替换entiire系列。

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

Answer 3

   $(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()
});
});

具有列条形图的Ajax动态数据

3 个答案: