highcharts jquery实时更新

时间：2018-07-19 13:42:57 阅读：306 评论：0 收藏：0 [点我收藏+]

标签：har input def oct settime 身边 nload legend title

<!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 + "\nStatus: " + 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]";

标签：har input def oct settime 身边 nload legend title

原文地址：https://www.cnblogs.com/photo520/p/9334858.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行