优秀的图表库-Highcharts

听说戴耳机，效果更佳~

作者吐槽

上上上上周老大安排某天任务："运营和代理系统，主页添加快捷、代还交易分润统计"；（没了，没了，没了）言简意赅，精短简练，不给满分怕骄傲，逼死了某个强迫症（页面设计的太丑 或 图表太丑，自己受不了，做太好又浪费太多时间），找了三个纯 JS 图表库（ECharts 、Chart.js 、Highcharts ）,还是选择了 Highcharts 比较好看且交互比较多，看了下文档和案例，还行不难，就开始边设计边做需求了，最终效果如下（他是一个有 UI 梦想的后台程序员）：

Highcharts

让数据可视化更简单。

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

演示：https://www.hcharts.cn/demo/highcharts#column

API：https://api.hcharts.cn/

错误码：https://www.hcharts.cn/errors

Highcharts全局引用 JS

Highcharts3D 饼图

HTML：

JS：

后台数据接口：

小结：

按照案例规定的格式封装成JSON返回数据，根据文档添加自己需要的控件和样式，在页面 JS 填充数据即可，可异步可同步，这个比较简单就不展示封装的代码，最后一个案例会详细讲解；

Highcharts堆叠条形图

HTML：

JS：

后台数据接口：

小结：

没什么好讲的，不懂可以看文档。

Highcharts多个图表共用一个提示框

HTML：

JS：

后台数据接口：

小结：

这里的共用一个提示框，即上下数据会同时在一个刻度线显示，鼠标滑动到某个刻度线会将两个图表的数据同时显示，这里因为业务则使用两个图表；

这里开发时有几个坑：

1、页面 x 轴使用当前月份日号需要自己处理，Highcharts 并没有直接生成日期的控件，只能在后台传当前的毫秒数，这里为了与刻度线对齐，必须使用当天 08:00 的毫秒数，直接在页面 xAxis 里的 labels，并且进行格式转化，详细见代码；

2、因为日期和数据时分开传到前端页面的，所以存在一个对应日期的数据无法和页面的日期对应，即页面的日期会自动更新，而对应日期的数据若当天无数据则无法自动更新，出现失效数据，因此直接在后台 oracle 使用 sql 自动更新日期并且 left join 到查出的对应日期的数据，在后台自动更新当天数据，若当天无数据则将数据变为 0,即可，这样保证前后端数据都对应其日期；

3、封装 JSON 数据的格式需要注意是否是字符串，数组里存放的元素有 Map 和 数组 或者 List 等不同格式，该数组需要定义为 Object，否则在转为 JSON时将无法得到想要的格式，数据则填充不进去，详细看代码；一开始没看清格式，被这个坑了很久，所以这是重点！若需要自己转 JSON，建议使用 Fastjson，简单方便；

简洁的 bootstrap 分页插件

来自他的深深的抱怨：本来就不是专业的前端，还要负责系统的前端，虽然他是一个有 UI 梦想的辣鸡假前端 的 半吊子后端，选择了 layui、easyui、bootstrap、datatable 的集成 table 和 分页，但都他他他他他他的太丑了，受不了，就还是自定义一个 table 和 原本想自己写个分页插件但浪费太多时间直接网上复制粘贴改改数据格式就完成任务，即搭配了 bootstrap 的分页插件使用；

效果：

bootstrap - pagination 下载地址：

https://github.com/bootstrap-ruby/will_paginate-bootstrap

bootstrap全局引用 JS：

HTML：

CSS：

JS：

后台数据接口：

小结：

这里后端使用 PageHelper 插件节省自己写数据分页的时间，而且简单方便，前端若读者嫌麻烦，可以使用很多框架集成的表格分页库，只需通过 Ajax 去获得数据填充即可，代码量也很少。

调查

啰嗦一句，实战文不定时更新，若读者喜欢，麻烦点赞，根据赞的数量会决定更新频率，此主题会根据读者反应来决定 他是否长期更！谢谢！

—— 岁月亏欠的，一直都是那些记忆力好又偏偏念旧的人。——