分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

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

发布时间:2023-09-06 01:47责任编辑:彭小芳关键词:PHP

【一】概论

(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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved