帶有數位資訊的統計圖表在網路網頁上佔有舉足輕重的地位，除了基礎的展示數字的功能，現在人們越來越重視這些圖表的美觀、互動性等。於是，程式設計師面臨的考驗越來越嚴重，一般人想像中的用做圖軟體生成圖片再放到網頁中的過程是不現實的，即便美觀方面可能很好，但不便於修改、純靜態、無法即時更新等劣勢給其定下了基調，不能大範圍使用！現在各種網路程式語言也有很多，asp, php, .net…絕大多數都帶有腳本畫圖功能，但功能相當基礎，需要一個圖形一個圖形地畫，並且需要計算坐標等信息，想要美觀有點難…php中的Jpgraph類別函式庫屬於表較好的一種，但動態美觀仍然較差…
JQuery的誕生為網頁動態互動設計帶來了光明，許多面向青年時尚群體的新興網站都採用了JQuery的技術，最顯而易見的就是網頁上各種模組的緩動、淡入淡出等效果。科技的發展也為網頁統計圖的展現形式帶來了很大的發展，以下介紹其中一種比較簡單但同時也比較實用的javascript類別庫－Highcharts（統計圖）、Highstock（時間序列資料展示） ，二者都是用純JavaScript編寫的圖表庫, 能夠很簡單便捷的在web網站或是web應用程式添加有互動性的圖表，不需要像Flash和Java那樣需要插件才可以運行，而且運行速度快，具有很好的兼容性，可以實現自適應尺寸，能夠完美支援當前大多數瀏覽器，包括令許多前端工程師們頭疼的IE6。 。並且免費提供給個人學習、個人網站和非商業用途使用。目前HighCharts支援的圖表類型有曲線圖、區域圖、長條圖、圓餅圖、散狀點圖和綜合圖表。 Highstock主要用於時間序列的資料展示。
HighCharts的主要特性包括：
1.相容性：HighCharts採用純JavaScript編寫，相容於現今大部分的瀏覽器，包括iPhone、IE和火狐等等；
2.圖表類型眾多：HighCharts現在支援多種圖表類型，包括曲線圖、區域圖、長條圖、餅狀圖、散狀點圖和綜合圖表等等，可以滿足各種需求。
3.不受語言約束：HighCharts可以在大多數的WEB開發中使用，並且對個人用戶免費，支援ASP，PHP，JAVA，.NET等多種語言中使用。
4.提示功能：HighCharts產生的圖表中，可以設定在數據點上顯示提示效果，即將滑鼠移動到某個數據點上，可以顯示該點的詳細數據，並且顯示效果可以進行設定。
5.放大功能：HighCharts可以大量資料集中顯示，並且可以放大某一部分的圖形，將圖表的精度增大，進行詳細的顯示，可以選擇橫向或縱向放大。
6.時間軸：可以精確到毫秒。
圖表範例：
所有圖表範例請見官方demo：http://www.highcharts.com/demo/ http://www.highcharts.com/stock/demo/
這兩類js類庫圖表的調用十分方便，按照官方提供的模板，在頁面中插入需要的js代碼和引用的js文件，在插入圖表的div層區域使用具有唯一性的id值調用即可。
圖表上的文字修改：
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}圖表中的資料來源變更大致分為三種情況：
1.最簡單的，直接在頁面上使用文字替換
series: [{
name: 'USA',
data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null , null , null ,null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]2.呼叫特定格式的文字檔：
jQuery.get('analytics.tsv', null, function(tsv, state, xhr)以此為例，用文字編輯軟體開啟analytics.tsv檔案可以看到資料結構，完全以原結構產生新資料替換即可。
3.在Highstock時間序列類型的圖表中，大都是採用的遠端檔案呼叫方式：
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data)同樣可以開啟範例的檔案http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?，
?([ [Date.UTC(2003,8,24),0.8709], [Date.UTC(2003,8,25),0.872], [Date.UTC(2003,8,26),0.8714], [Date.UTC(2003,8,29),0.8638], [Date.UTC(2003,8,30),0.8567], [Date.UTC(2003,9,1),0.8536], [Date.UTC(2003,9,2),0.8564], [Date.UTC(2003,9,3),0.8639], [Date.UTC(2003,9,6),0.8538], [Date.UTC(2003,9,7),0.8489], [Date.UTC(2003,9,8),0.8459], [Date.UTC(2003,9,9),0.8521], [Date.UTC(2003,9,10),0.8477], …………
按結構模仿。
對於有良好的javascript基礎的人來說，完全可以不受限於給出的資料呼叫方式，可以很靈活的進行調整。對於菜鳥等級而言，依照資料結構模仿即可，注意資料檔案的結構格式，檔案頭尾的特別標識，如果標識遺失，可能會導致資料無法讀取，圖表無法展示。
資料來源的使用完全可以使用php等腳本語言從資料庫中讀取，達到即時更新的目的。同時，對於比較複雜的展示項目，也可以採用多模組組合的方式，將一個網頁拼合成一個展示系統。