A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

【郑州校区】前端报表生成技术 highcharts
前端报表技术,使用 JavaScript 生成漂亮图表  
Highcharts : 折线图、 区域图、 柱状图、 饼状图 …  

默认下载包,demo 页面引入 js 地址有问题, 修改 demo 页面 js 文件引入位置  
分析业务:  
1、 城市各月份 温度统计  物流业务: 各月份产生订单数量、 各月份销售数据  
第一步: 将 highcharts js 和 css 文件 导入项目   将解压目录 js 下文件 复制 js/highcharts 目录  
第二步: 在页面引入 highcharts 的 js 文件  
复制 demo 的代码 修改就可以  title : 报表标题  subtitle: 子标题   xAxis : 横坐标  yAxis: 纵坐标
series: 报表数据  
        data 必须要和 xAxis 横坐标数据对应上  
第三步: 扩展功能  
引入 modules/xx.js  
第四步: 去掉 highcharts.com 的 logo  
第五步: 定制打印是否显示  
课后练习:  
2、 柱状图  
3、 饼图  
传智播客·黑马程序员郑州校区地址
河南省郑州市 高新区长椿路11号大学科技园(西区)东门8号楼三层
联系电话 0371-56061160/61/62
来校路线  地铁一号线梧桐街站A口出

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马