纯后端做多样化数据统计图经验分享

自己在做统计图的时候发现前端框架不是很会!所以自己研究 自己封装了一个统计图处理器(折线图 ,条形图 等等...)

说一下大概原理

首先用到的前端技术Highcharts 是一个用纯JavaScript编写的一个图表库。

这是他HighCharts 特性所以就选择了他来做

• 兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。
• 多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。
• 免费使用 - 开源免费。
• 轻量 - highcharts.js 内核库大小只有 35KB 左右。
• 配置简单 - 使用 json 格式配置
• 动态 - 可以在图表生成后修改。
• 多维 - 支持多维图表
• 配置提示工具 - 鼠标移动到图表的某一点上有提示信息。
• 时间轴 - 可以精确到毫秒。
• 导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式
• 输出 - 网页输出图表。
• 可变焦 - 选中图表部分放大，近距离观察图表；
• 外部数据 - 从服务器载入动态数据。
• 文字旋转 - 支持在任意方向的标签旋转。
• jsp或者html引入
• <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

• 在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小

  <div id="container" style="width: 600px;height:400px;"></div>

  然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下：