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(); }
③把要显示的数据修改到视图文件中去:
⑥测试输出结果: