两种制作报表工具
分别是hcharts和echarts
工具的特性：
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。 详细介绍：http://echarts.baidu.com/feature.html
Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。 Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。 详细介绍：https://www.hcharts.cn/products/highcharts
补充：Highstock 比 Highcharts 多了设置时间范围等功能，例如zabbix，就需要设置时间范围。
Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。
Hcharts官网:
Hcharts API文档：
https://api.hcharts.cn/highcharts
Hcharts在线示例：
https://www.hcharts.cn/demo/highcharts
Echarts官网：
Echarts API文档:
http://echarts.baidu.com/api.html#echarts
Echarts在线示例：
Highcharts JS代码说明：以基本折线图为例
配置选项：主要分为两部分，分别是 全局配置、主配置。 - 全局配置 Highcharts.setOptions({ global: { useUTC: false // false表示关闭UTC时间 } }); - 主配置 var chart = new Highcharts.Chart('id1', { // 创建一个hchat对象 // 图表标题 title: { text: '不同城市的月平均气温', x: 0 }, // 图表副标题 subtitle: { text: '数据来源: WorldClimate.com', x: 0 }, // 关于图表区和图形区的参数及一般图表通用参数。 chart: { events: { load: function (e) { // 图标加载时，执行的函数, } } }, // Highchart默认在图表的右下角放置版权信息的标签 credits: { enable: true, position: { align: 'right', verticalAlign: 'bottom' }, text: '老男孩', href: 'http://www.oldboyedu.com' }, // 图例说明是包含图表中数列标志和名称的容器。 legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 1 }, // X轴 xAxis: { // categories: ['1.1', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], type: 'datetime', labels: { formatter: function () { return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value); }, rotation: 30 } }, // Y轴 yAxis: { title: { text: '数值' } }, // 数据提示框 tooltip: { valueSuffix: '个', xDateFormat: "%Y-%m-%d %H:%M:%S", pointFormatter: function (e) { var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>'; return tpl; }, valueDecimals: 1, useHTML: true }, // 数据列配置 plotOptions: { series: { cursor: 'pointer', events: { click: function (event) { // 点击某个指定点时，执行的事件 console.log(this.name, event.point.x, event.point.y); } } } }, // 图表的数据列 series: [{ name: '东京', // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] data: [ [1501689804077.358, 8.0], [1501689814177.358, 6.9], [1501689824277.358, 16.9], [1501689834377.358, 11.9] ] }, { name: '洛杉矶', // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] data: [ [1501689804077.358, 18.0], [1501689814177.358, 16.9], [1501689824277.358, 26.9], [1501689834377.358, 9.9] ] }] }); // chart.addSeries({name:'北京',data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]}); // 参数：数值；是否重绘; isShift; 是否动画 // chart.series[0].addPoint(18); // chart.series[0].addPoint([12]); // chart.series[0].addPoint([v.x, v.y]); // 参数：是否重绘 // chart.series[0].remove(false); // 更新饼图 // $('#id1').highcharts().series[0].data[0].update({x: 0, y: 100})
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="i1"></div> <script src="/static/jquery-1.12.4.js"></script> <script src="/static/Highcharts-5.0.12/code/highcharts.js"></script> <script> // jQuery == $ Highcharts.setOptions({ global: { useUTC: false } }); var chart = new Highcharts.Chart('i1',{ title: { text: '大标题', x: 0 }, subtitle: { text: '数据来源: WorldClimate.com', x: 0 }, chart: { events: { load: function (e) { // 图标加载时，执行的函数 } } }, credits: { enable: true, position: { align: 'right', verticalAlign: 'bottom' }, text: '老男孩', href: 'http://www.oldboyedu.com' }, xAxis: { // 适用于固定x轴 type: 'datetime', labels: { formatter: function () { return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value); }, rotation: 30 } }, yAxis: { title: { text: '数值' } }, tooltip: { pointFormatter: function (e) { var tpl = '<span style="color:' + this.series.color + '">哦哦哦哦哦小</span> ' + this.series.name + ': <b>' + this.y + '个</b><br/>'; return tpl; }, useHTML: true }, plotOptions: { series: { cursor: 'pointer', events: { click: function (event) { // 点击某个指定点时，执行的事件 console.log(this.name, event.point.x, event.point.y); } } } }, series: [ { name: '洛杉矶', data: [ [1501689804077.358, 8.0], [1501689814177.358, 6.9], [1501689824277.358, 16.9], [1501689834377.358, 11.9] ] }, { name: '南京', data: [ [1501689804077.358, 18.0], [1501689814177.358, 16.9], [1501689824277.358, 6.9], [1501689834377.358, 21.9] ] } ] }); // chart.addSeries({name:'北京',data: [[1501689804077.358, 8.0],[1501689814177.358, 10.9],[1501689824277.358, 26.9],[1501689834377.358, 19.9]]}); // 参数：数值；是否重绘; isShift; 是否动画 // chart.series[0].addPoint([1501689844377.358, 29.9]); </script> </body> </html>
注：Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表。
hcharts在报障系统中得应用
下载安装包：http://img.hcharts.cn/zips/Highcharts-5.0.12.zip
解压后，打开index.html进行选择
报障系统示例代码：http://files.cnblogs.com/files/luchuangao/rbacdemo.zip