php+highchats生成动态统计图



复制代码 代码如下:



    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”” width=100% src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script> 


            <script type=”text/javascript”> 


    $(function () { 


    var ds = [{“name”:”/u4e0a/u6d77″,”y”:28.2},{“name”:”/u5317/u4eac”,”y”:48.2},{“name”:”/u5e7f/u4e1c”,”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” width=100% src=”js/hc.js”></script> 


    <script” width=100% src=”js/modules/exporting.js”></script> 


    <div id=”container” style=”min-width: 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: [ 


    <span style=”white-space:pre”>                      </span>ds[2], ds[3] 


    <span style=”white-space:pre”>                  </span>] 



SyntaxHighlighter.highlight();