1

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

3 回答 3

1

ajax 调用应该简单地获取图表以显示的新数据。无需重新绘制整个图表，只需替换系列数据，或添加单个点即可。这是关于在 highcharts 网站上执行此操作的一篇好文章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 来替换整个系列。

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

于 2013-03-20T09:08:46.160 回答
1

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

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

}
于 2013-03-20T04:35:11.050 回答
0 
   $(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()
});
});
于 2013-03-21T12:28:15.787 回答