• highchats与php结合生成动态统计图





    series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]

    主要看这段:

    {
    name: 'Chrome',
    y: 12.8,
    sliced: true,
    selected: true
    }

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>FusionCharts</title>
    
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    		<script type="text/javascript">
    $(function () {
    
    var ds = [{"name":"u4e0au6d77","y":28.2},{"name":"u5317u4eac","y":48.2},{"name":"u5e7fu4e1c","y":18.2}];
    //事实上仅仅要依照样例中的json显示方式展示即可了,如chrome。
        	
        	// Radialize the colors
    		Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
    		    return {
    		        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
    		        stops: [
    		            [0, color],
    		            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
    		        ]
    		    };
    		});
    		
    		// Build the chart
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2010'
                },
                tooltip: {
            	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: ds,
                }]
            });
        });
        
    
    		</script>
    	</head>
    	<body>
    <script src="js/hc.js"></script>
    <script src="js/modules/exporting.js"></script>
    
    <div id="container" style="min- 310px; height: 400px; margin: 0 auto"></div>
    <?php
    
    area();
    
    /**
     * 地区接口
     * name名称
     * y数据值
     * 
     */
    function area()
    {
    	$b = array(
    				array('name'=>'上海', 'y'=>28.2),
    				array('name'=>'北京', 'y'=>48.2),
    				array('name'=>'广东', 'y'=>18.2),
    		);
    
    
    	$data = json_encode($b);
    	echo($data);
    }
    
    ?>
    	</body>
    </html>
    

    下面是php输出json数据,供js使用:

    <?php 
    $strs = @file("/proc/net/dev"); 
    for ($i = 2; $i < count($strs); $i++ )
    {
    	preg_match_all( "/([^s]+):[s]{0,}(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)/", $strs[$i], $info );
    /*	$NetInput[$i] = formatsize($info[2][0]);
    	$NetOut[$i]  = formatsize($info[10][0]);
    */ 
    	$tmo = round($info[2][0]/1024/1024, 5); 
    	$tmo2 = round($tmo / 1024, 5);
    	$NetInput[$i] = $tmo2;
    	$tmp = round($info[10][0]/1024/1024, 5); 
    	$tmp2 = round($tmp / 1024, 5);
    	$NetOut[$i] = $tmp2;
    
    }
    
    $arr = array();
    if (false !== ($strs = @file("/proc/net/dev"))) : 
     for ($i = 2; $i < count($strs); $i++ ) :  
     preg_match_all( "/([^s]+):[s]{0,}(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)s+(d+)/", $strs[$i], $info );
    	$arr[$i]["name"] = $info[1][0];
    	$arr[$i]["data"][0] = $NetInput[$i];
    	$arr[$i]["data"][1] = $NetOut[$i];
    	
     endfor;  
     endif;  
    echo(json_encode($arr));
    输出:
    {"2":{"name":"lo","data":[0,0]},"3":{"name":"eth0","data":[0.40377,0.00353]}}
    
    
    js调用:
    
    series: [
    						ds[2], ds[3]
    					]
    

  • 相关阅读:
    mstsc远程桌面 mstsc /v:ip /admin
    JS模块化编程(五)---按照AMD规范扩展全局对象
    常见问题
    django--用户认证组件
    Django
    Django
    Django
    Django
    Django
    第六模块-图书管理系统--多表
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4080948.html
Copyright © 2020-2023  润新知