位置：首页>> 网络编程>> php编程>> php+highchats生成动态统计图

php+highchats生成动态统计图

　　发布时间：2024-05-02 17:19:08　

标签：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>]

投稿

php+highchats生成动态统计图

猜你喜欢