码迷,mamicode.com
首页 > Web开发 > 详细

视频学习笔录---ThinkPHP---插件highcharts

时间:2018-04-01 19:59:20      阅读:572      评论:0      收藏:0      [点我收藏+]

标签:图片   官网   客户   技术分享   分享   指定   资源   blog   股票   

【一】概论

(1)介绍

基于jquery开发的国外图标插件,统计图,折线图,饼状图等常常用到。

国内也有一款类似插件echarts,由百度开发。

(2)官网:www.highcharts.com             爱好者编写集成的官网:www.hcharts.cn

         官网的下载地址:https://www.highcharts.com/products/highcharts

         demo网址:www.highcharts.com/demo

(3)支持特效demo:3D、仪表盘、折现、类心电图实时刷新、柱状、点状、雷达、漏斗、金字塔

         漏斗图:常用于销售走势,最上方为有意向用户,底部为成交客户。具体有以下几类

技术分享图片

(4)应用实例:QQ的全国在线人数分布,通过Flash做的;百度echarts的全国数据分布,通过js做的

技术分享图片

非常直观反映出中国互联网发展情况和地域。亮点越多说明当地互联网越发达。发达地区有北上广,重庆

(5)echarts包含更加丰富的demo,拓展了许多,包含全球航线、股票数据走势

(6)用法基本一致

 

 

【二】案例

使用Highcharts实现部门人数统计

要求:使用图标形式统计出每个部门人数

(1)准备和步骤:

        1. 选样式目录,这里我用的examples/column-rotated-labels;

        2. 分析demo:①引入jquery和js类文件;②替换data数据;③声明div图标容器,用来放置图标

(2)开始编写

        1. 修改模板文件User/showList.html,将下面的统计按钮设置链接,点击后跳到统计页面

            这里不用做任何操作,所以直接修改a标签的href即可,写成什么呢?这要看方法了

        2. 定义图标页面方法charts,方法写在了User控制器里,所以href写为__CONTROLLER__/charts

        3. 定义charts方法展示图表模板文件

 //charts图表
 public function charts(){
       $this->display();
 }

        4. 复制模板文件到指定位置;同时为了更快在线上访问网站,需要复制静态资源文件到站点目录下;

            ①这里是复制到User/charts,html下;

            ②引入静态资源并修改路径:这里为了方便,我直接把整个code复制到了静态资源目录下,后期使用的插件都放到plugin(插件)目录下

              技术分享图片

        5. 

 

视频学习笔录---ThinkPHP---插件highcharts

标签:图片   官网   客户   技术分享   分享   指定   资源   blog   股票   

原文地址:https://www.cnblogs.com/jianxian/p/8687581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!