TP3.2 - highcharts统计图使用方法流程

1.下载highcharts插件。

2.找到所需要的视图文件，例如：

        页面输出结果：

        

3.将该视图文件复制到项目中，并重命名。如图：

4.修改此文件内容：

①引入 Highcharts（引入网路和本地二选一）；

1.引入网络地址：

        Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是：

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

        导出功能需要额外的引入相关的文件，下面是示例代码：

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<!-- 需要保存导出功能模块文件是在 highcharts.js 之后引入 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<!-- 客户端导出功能模块为可选选项 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>

注意：Highcharts 4.2版本开始，就不在依赖jQuery,若其他地方不需要，无需引入jQuery.

2.引入本地路径：

•   复制解压后的highcharts文件到项目中：

          

•     设置默认配置项

•   引入所需文件

<script src="__COMMON__/highcharts/code/highcharts.js"></script>

<script src="__COMMON__/highcharts/code/modules/offline-exporting.js"></script>

jQuery<script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

②构造自己需要显示的数据：

 function charts(){
        //1.实例化数据表模型：
        $user = D('User');
        //2.从数据表中读取信息：
        $data = $user
            ->alias('u')
            ->join('left join oa_dept d on u.user_deptid = d.dept_id')
            ->field('d.dept_name, count(*) as num')
            ->group('user_deptid')
            ->select();
        //dump($data);die;
        //3.重构数据信息：
//        ['Shanghai', 23.7],
//            ['Lagos', 16.1],
        $result="";
        foreach($data as $value){
            $result .= "['".$value['dept_name']."',".$value['num']."],";
        }
        //4.分配数据到模板
        $this->assign(result,$result);
        $this->display();
    }

③把要显示的数据修改到视图文件中去：

⑥测试输出结果：