php+highchats生成动态统计图

178 阅读 0 评论 118 点赞

我是靠谱客的博主清新吐司，最近开发中收集的这篇文章主要介绍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" 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 src="js/hc.js"></script>  
    <script 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>]  