如何动态更新highcharts使用php和ajax?

时间:2017-03-27 12:50:02

标签: php ajax highcharts

欢迎!

我用highcharts做一个动态曲线,使用ajax将数据返回到系列,在图表的情况下,使用setTimeout将点添加到系列,现在它似乎有一条曲线,但是不会继续

enter image description here

以下是代码,我想知道如何制作它。 像这样:

https://www.hcharts.cn/demo/highstock/dynamic-update

也许晚上没有买卖,没有曲线。

谢谢大家的帮助。

php代码:

/ * /index.php/Home/Hq/getdata * /

    public function getdata(){
    $goods = I('post.goods');
    $goods = $goods?$goods:'AG';
    $pre = C('DB_PREFIX');
    $model = M();
    $sql = "select id from ".$pre.$goods.' order by id desc limit 0,1';
    //echo($sql);
    $one = $model->query($sql);
    $startid = intval($one[0]['id'])-300;

    $sql = "select mtime,price from ".$pre.$goods.' where id>'.$startid; //选取最近的300条记录

    $list = $model->query($sql);

    foreach($list as $k=>$v){
        $dyn[$k][]=intval($v['mtime'])+8*3600*1000;
        $dyn[$k][]=intval($v['price'])+rand(0,10);/// 这是加个随机数做测试;
    }
   //  echo json_encode($dyn);
   $this->ajaxReturn($dyn);
}

/ * /index.php/Home/Hq/getcp * /

    public function getcp(){
    ...
    $x = $this->getMillisecond()+8*3600*1000 ;
    $x = sprintf('%-013s', $x);
    $y = intval($cp)+rand(0,10);/// 这是加个随机数做测试;

    $lastone = array($x,$y);
    // echo json_encode($lastone);
    $this->ajaxReturn($lastone);
}

html代码:

      $.ajax({
            url: '/index.php/Home/Hq/getdata?goods=' + goodsCode,
            dataType: 'json',
            async: false,
            success: function (result) {
                var data_a = result;
                $('#' + container_id).highcharts('StockChart', {
                    chart: {
                        events: {
                            load: function () {
                                var series = this.series[0];
                                // console.log(series);
                                setInterval(function () {
                                   $.ajax({
                                        url: '/index.php/Home/Hq/getcp',
                                        success: function (point) {
                                                x = point[0];
                                                y = point[1];
                                                series.addPoint([x,y], true, true);
                                        },
                                        cache: false
                                    });
                                },3000);
                            }
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    scrollbar: {
                        enabled: false
                    },

                    series: [{
                        name: '实时行情',
                        data: data_a
                    }],
                    lineWidth: 0.8,
                    navigator: {
                        enabled: false
                    },
                    rangeSelector: {
                        inputEnabled: false,
                        selected: 0,
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    xAxis: {
                        labels: {
                            format: '{value:%H:%M}'
                        }
                    },
                    yAxis: {
                        opposite: false,
                        showLastLabel: true
                    },
                    tooltip: {
                        useHTML: true,
                        headerFormat: '<table>',
                        pointFormat: '<tr><td colspan="2">{point.x:%H:%M:%S}</td></tr>' +
                        '<tr><td>数值:</td><td>{point.y}</td></tr>',
                        footerFormat: '</table>',
                        valueDecimals: 2
                    }
                });
            }});

0 个答案:

没有答案