highcharts(前端报表生成)

highcharts(前端报表生成)

前端报表技术:使用 JavaScript 生成漂亮图表
百度 echarts: http://echarts.baidu.com/examples.html
Funsioncharts : http://www.fusioncharts.com/goodies/fusioncharts-free/
Highcharts : 折线图、 区域图、 柱状图、 饼状图 …

highcharts(前端报表生成)_第1张图片
下载: http://www.highcharts.com/download

highcharts(前端报表生成)_第2张图片

默认下载包,demo 页面引入 js 地址有问题, 修改 demo 页面 js 文件引入位置

第一步: 将 highcharts js 和 css 文件 导入项目
将解压目录 js 下文件 复制 js/highcharts 目录
highcharts(前端报表生成)_第3张图片
第二步: 在页面引入 highcharts 的 js 文件
这里写图片描述
复制 demo 的代码 修改就可以
title : 报表标题
subtitle: 子标题
xAxis : 横坐标
yAxis: 纵坐标
highcharts(前端报表生成)_第4张图片
series: 报表数据
highcharts(前端报表生成)_第5张图片

注意:data 必须要和 xAxis 横坐标数据对应上
第三步:扩展功能(导出功能)
引入 modules/xx.js
这里写图片描述
效果展示
highcharts(前端报表生成)_第6张图片

第四步: 去掉 highcharts.com 的 logo
这里写图片描述
将图中的 enabled:!0 改为 enabled:0 即可!
第五步: 定制打印是否显示
这里写图片描述

柱状图与饼图只需要参考demo进行修改运用到项目中即可!

你可能感兴趣的:(报表,highcharts)