出自我的個人博客: http://www.suzf.net/thread-1001-345.html
Highcharts 是一個用純JavaScript編寫的一個圖表庫。
Highcharts 能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表
Highcharts 免費提供給個人學習、個人網站和非商業用途使用。
HighCharts 特性
兼容性 – 支持所有主流瀏覽器和移動平臺(android、iOS等)。
多設備 – 支持多種設備,如手持設備 iPhone/iPad、平板等。
免費使用 – 開源免費。
輕量 – highcharts.js 內核庫大小隻有 35KB 左右。
配置簡單 – 使用 json 格式配置
動態 – 可以在圖表生成後修改。
多維 – 支持多維圖表
配置提示工具 – 鼠標移動到圖表的某一點上有提示信息。
時間軸 – 可以精確到毫秒。
導出 – 表格可導出爲 PDF/ PNG/ JPG / SVG 格式
輸出 – 網頁輸出圖表。
可變焦 – 選中圖表部分放大,近距離觀察圖表;
外部數據 – 從服務器載入動態數據。
文字旋轉 – 支持在任意方向的標籤旋轉。
支持的圖表類型
HighCharts支持的圖表類型:
序號 | 圖表類型 |
---|---|
1 | 曲線圖 |
2 | 區域圖 |
3 | 餅圖 |
4 | 散點圖 |
5 | 氣泡圖 |
6 | 動態圖表 |
7 | 組合圖表 |
8 | 3D 圖 |
9 | 測量圖 |
10 | 熱點圖 |
11 | 樹狀圖(Treemap) |
好了 接下來我給大家介紹一個簡單地例子:
highcharts + mysql 展示網站 PV&UV 訪問情況。
因爲只是業餘拿來耍耍,難免有紕漏。歡迎大家指出。
提供部分主要代碼
創建數據庫及用戶
mysql> use highcharts; Database changed mysql> show create table access_log\G *************************** 1. row *************************** Table: access_log Create Table: CREATE TABLE `access_log` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(100) DEFAULT NULL, `date` date DEFAULT NULL, `pv` decimal(10,0) DEFAULT NULL, `uv` decimal(10,0) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=124 DEFAULT CHARSET=latin1 1 row in set (0.00 sec)
展示頁面 access_new.php
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>suzf.net visitor graph</title> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Daily visitors of www.suzf.net analysis', x: -20 }, subtitle: { text: '', x: -20 }, xAxis: { tickInterval: 7, tickPixelInterval: 50, title: { text: 'timeline', }, categories: [] }, yAxis: { min: 0, title: { text: 'Values' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, credits:{ enabled:true, text:'suzf.net', href:'http://www.suzf.net', style: { cursor: 'pointer', color: 'green', fontSize: '20px' } }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] } $.getJSON("data_access.php", function(json) { options.xAxis.categories = json[0]['data']; options.series[0] = json[1]; options.series[1] = json[2]; chart = new Highcharts.Chart(options); }); }); </script> <script src="/js/highcharts.js"></script> <script src="/js/exporting.js"></script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
將結果格式化成JSON 格式 傳給前端 data_access.php
<?php $con = mysql_connect("hostname","highcharts","password"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("highcharts", $con); $sth = mysql_query("SELECT date FROM access_log"); $date = array(); $date['name'] = 'Date'; while($r = mysql_fetch_array($sth)) { $date['data'][] = $r['date']; } $sth = mysql_query("SELECT pv FROM access_log"); $pv = array(); $pv['name'] = 'PV'; while($rr = mysql_fetch_assoc($sth)) { $pv['data'][] = $rr['pv']; } $sth = mysql_query("SELECT uv FROM access_log"); $uv = array(); $uv['name'] = 'UV'; while($rr = mysql_fetch_assoc($sth)) { $uv['data'][] = $rr['uv']; } $result = array(); array_push($result,$date); array_push($result,$pv); array_push($result,$uv); print json_encode($result, JSON_NUMERIC_CHECK); mysql_close($con); ?>
下面我們來看一下效果吧