highcharts jquery实时更新

Posted photo520

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了highcharts jquery实时更新相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精彩身边-用户统计</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
 
<script>
$(function(){
    $("#button").click(function(){
        //alert("fdfd");
          $.get("http://123.57.43.70/jquery_test.php",function(data,status){
           var data = JSON.parse(data);
           view_default(data);
      });
    });
    
});
 
 
</script>
<script>
//$(function () {
function view_default(tmp){
    
    //alert("Welcome " + tmp);
    var highChart =     {
            title: {
                text: ‘Monthly Average Temperature‘,
                x: -20 //center
            },
            subtitle: {
                text: ‘Source: WorldClimate.com‘,
                x: -20
            },
            xAxis: {
                categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘,‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
            },
            yAxis: {
                title: {
                    text: ‘Temperature (°C)‘
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: ‘#808080‘
                }]
            },
            tooltip: {
                valueSuffix: ‘°C‘
            },
            legend: {
                layout: ‘vertical‘,
                align: ‘right‘,
                verticalAlign: ‘middle‘,
                borderWidth: 0
            },
            series: [{
                name: ‘Tokyo‘,
                data: []
            }]
        };
    
    highChart.series[0].data = tmp;
    
    $(‘#container‘).highcharts(highChart);
}
                            
</script>
 
</head>
<!-- <body onLoad="view_default([1.0, 2.9, 3.5, 4.5, 5.2, 6.5, 6.2, 6.5, 6.3, 18.3, 13.9, 9.6])">
 -->
 <body>
<div id="container" style="min-width:700px;height:500px"></div>
<input type="button" id="button" class="button" value="按钮">
 
<script type="text/javascript">
function load_html(){
    $.get("http://123.57.43.70/jquery_test.php",function(data,status){
           // alert("Data: " + data + "
Status: " + status);
               //    alert(data);
               var data = JSON.parse(data);
               //data = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
                   view_default(data);
    });
    
    setTimeout(load_html, 2000);  
                   
}
    
$(document).ready(function() {
    load_html(); 
});
 
 
 
</script>
</body>
</html>
<?php
 
echo "[1.0,2.9,3.5,4.5,5.2,6.5,7.2,8.5,9.3,10.3,13.9,0]";

以上是关于highcharts jquery实时更新的主要内容，如果未能解决你的问题，请参考以下文章

highcharts基本配置和使用highcharts做手机端图标

使用ajax来自mysql的highchart数据

Android Highcharts DialogFragment

Highcharts 环境配置

在Yii的HighCharts更新

如何使用jquery Highcharts在饼图中显示值而不是百分比