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();
}③把要显示的数据修改到视图文件中去：





⑥测试输出结果：