制作报表工具
?兩種制作報(bào)表工具
分別是hcharts和echarts
工具的特性：
ECharts，一個(gè)純 Javascript 的圖表庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級(jí)的 Canvas 類庫 ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對(duì)移動(dòng)端做了深度的優(yōu)化。 詳細(xì)介紹：http://echarts.baidu.com/feature.html Highcharts 是一個(gè)用純 JavaScript 編寫的一個(gè)圖表庫， 能夠很簡單便捷的在 Web 網(wǎng)站或是 Web 應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。Highcharts 支持的圖表類型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、瀑布流圖等多達(dá) 20 種圖表，其中很多圖表可以集成在同一個(gè)圖形中形成混合圖。 詳細(xì)介紹：https://www.hcharts.cn/products/highcharts補(bǔ)充：Highstock 比 Highcharts 多了設(shè)置時(shí)間范圍等功能，例如zabbix，就需要設(shè)置時(shí)間范圍。
Highstock 是用純 JavaScript 編寫的股票圖表控件，可以開發(fā)股票走勢(shì)或大數(shù)據(jù)量的時(shí)間軸圖表。它包含多個(gè)高級(jí)導(dǎo)航組件：預(yù)設(shè)置數(shù)據(jù)時(shí)間范圍，日期選擇器、滾動(dòng)條、平移、縮放功能。?
Hcharts官網(wǎng):
https://www.hcharts.cn/
Hcharts API文檔：
https://api.hcharts.cn/highcharts
Hcharts在線示例：
https://www.hcharts.cn/demo/highcharts
?
Echarts官網(wǎng)：
http://echarts.baidu.com
Echarts API文檔:
http://echarts.baidu.com/api.html#echarts
Echarts在線示例：
http://echarts.baidu.com/examples.html
?
Highcharts JS代碼說明：以基本折線圖為例
配置選項(xiàng)：主要分為兩部分，分別是 全局配置、主配置。- 全局配置 Highcharts.setOptions({global: {useUTC: false // false表示關(guān)閉UTC時(shí)間 } });- 主配置 var chart = new Highcharts.Chart('id1', { // 創(chuàng)建一個(gè)hchat對(duì)象// 圖表標(biāo)題 title: { text: '不同城市的月平均氣溫',x: 0 },// 圖表副標(biāo)題 subtitle: {text: '數(shù)據(jù)來源: WorldClimate.com',x: 0 },// 關(guān)于圖表區(qū)和圖形區(qū)的參數(shù)及一般圖表通用參數(shù)。 chart: {events: {load: function (e) {// 圖標(biāo)加載時(shí)，執(zhí)行的函數(shù), }} },// Highchart默認(rèn)在圖表的右下角放置版權(quán)信息的標(biāo)簽 credits: {enable: true,position: {align: 'right',verticalAlign: 'bottom'},text: '老男孩',href: 'http://www.oldboyedu.com' },// 圖例說明是包含圖表中數(shù)列標(biāo)志和名稱的容器。 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: '數(shù)值'} },// 數(shù)據(jù)提示框 tooltip: {valueSuffix: '個(gè)',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 },// 數(shù)據(jù)列配置 plotOptions: {series: {cursor: 'pointer',events: {click: function (event) {// 點(diǎn)擊某個(gè)指定點(diǎn)時(shí)，執(zhí)行的事件console.log(this.name, event.point.x, event.point.y);}}} },// 圖表的數(shù)據(jù)列 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]}); // 參數(shù)：數(shù)值；是否重繪; isShift; 是否動(dòng)畫 // chart.series[0].addPoint(18); // chart.series[0].addPoint([12]); // chart.series[0].addPoint([v.x, v.y]); // 參數(shù)：是否重繪 // 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: '大標(biāo)題',x: 0},subtitle: {text: '數(shù)據(jù)來源: WorldClimate.com',x: 0},chart: {events: {load: function (e) {// 圖標(biāo)加載時(shí)，執(zhí)行的函數(shù) }}},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: '數(shù)值'}},tooltip: {pointFormatter: function (e) {var tpl = '<span style="color:' + this.series.color + '">哦哦哦哦哦小</span> ' + this.series.name + ': <b>' + this.y + '個(gè)</b><br/>';return tpl;},useHTML: true},plotOptions: {series: {cursor: 'pointer',events: {click: function (event) {// 點(diǎn)擊某個(gè)指定點(diǎn)時(shí)，執(zhí)行的事件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]]});// 參數(shù)：數(shù)值；是否重繪; isShift; 是否動(dòng)畫// chart.series[0].addPoint([1501689844377.358, 29.9]);</script> </body> </html> 基本折線圖示例代碼?注：Highcharts 在 4.2.0 開始已經(jīng)不依賴 jQuery 了，直接用其構(gòu)造函數(shù)既可創(chuàng)建圖表。
hcharts在報(bào)障系統(tǒng)中得應(yīng)用
下載安裝包：http://img.hcharts.cn/zips/Highcharts-5.0.12.zip
解壓后，打開index.html進(jìn)行選擇
報(bào)障系統(tǒng)示例代碼：http://files.cnblogs.com/files/luchuangao/rbacdemo.zip
?
轉(zhuǎn)載于:https://www.cnblogs.com/luchuangao/p/7237176.html
總結(jié)
- 上一篇： 使用scanf()函数接收带空格的字符串
- 下一篇： 内容溢出处理