Highcharts是一款純javascript編寫的圖表庫，能夠很簡單便捷的在Web網站或Web應用中添加交互性的圖表，Highcharts目前支持直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同類型的圖表，可以滿足你對Web圖表的任何需求 ！
以上是Highcharts中文網上的簡介！
如果論語法的簡單性，或者需要畫功能簡單的折線、柱狀以及餅狀圖，Highcharts是遠遠不如js圖標庫——js charts 的，但是如果涉及到復雜多樣的功能特性，Highcharts甩了js charts何止8條街！
這類的Js框架通常很容易學習。下載了包后，看例子就可以了，不過Highcharts在這點上做的是非常好！
見：
Highcharts中文網首頁：http://www.hcharts.cn/index.php
Highcharts官網：http://www.highcharts.com/
學習highcharts無需按照包下的examples例子一個個去試（我學js charts就是這么做的 !- -），
通過中文網提供的這3個頁面，一個小時你就可以初步掌握這項技術！
學習的重點就是這個在線演示平台啦，它包含了下載包中的所有示例文件。而且可以點擊
頁面中間的這個“編輯代碼”可以跳轉到一個“在線測試平台”的地方，像這里http://www.hcharts.cn/test/index.php?from=demo&p=10
在線演示平台做的也非常詳細，不過很多版塊還在完善中。。。
highcharts學習的入口是什么呢，就是官網的這個圖啦（這里從官網拿下來）：
這里是一個圖表的所有屬性。一目了然。
這里是官網上的一個簡單的圖表示例：
這個示例是由下面的代碼直接生成的。我簡單注釋了一下。代碼位於Highlchar-4.0.3下，\Highcharts-4.0.3\examples\line-labels\index.html，直接打開即可。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <!--值得注意的是，Highcharts運行需要兩個js文件，Highcharts.js及jQuery、MooTools 、Prototype 、
Highcharts Standalone Framework 中的一個框架文件。（抄自官網...）--> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script> <style type="text/css"> ${demo.css} </style> <script type="text/javascript"> $(function () { $('#container').highcharts({ chart: { //圖表總體的設置 type: 'line' //這個默認為line即折線圖,還可以為柱狀column，不過餅狀圖不是這里設置，而是直接在series數據列上指定 type: 'pie', }, title: { //圖表標題 text: 'Monthly Average Temperature' //標題名稱 }, subtitle: { //副標題 text: 'Source: WorldClimate.com' }, xAxis: { //x軸 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] //x軸數據 }, yAxis: { //Y軸 title: { text: 'Temperature (째C)' //y軸標題 } }, plotOptions: { //圖表標示的各種選項 line: { //這里由於是折線圖，那么就是折線圖的選項 dataLabels: { //數據標簽 enabled: true //允許顯示數據，默認為false，不顯示具體數據 }, enableMouseTracking: false //這個讓鼠標放到數據點的時候，不動態顯示一個小圓圈，默認為true } }, series: [{ //這里省略了一個data數組的標示，更為方便，實際上下面的name和data都是屬於data數組元素的屬性，下面2組數據，就代表2組數據並列 name: 'Tokyo', //數據名 data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //具體數據 }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); </script> </head> <body> <script src="../../js/highcharts.js"></script> <script src="../../js/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
highcharts是一個簡單的js圖表框架，不建議仔細閱讀API文檔，建議根據示例和實際需求，一邊添加功能，一邊快速學習。
PS : 經斯克迪亞提醒，才發現，這個highchars中文網跟bootstrap中文網基本基於同樣的主頁樣式，是一個今年剛畢業的學生創辦的，實在年輕有為！跟highcharts官方（http://www.highcharts.com）的關系其實不大。不過作為非營利性的網站，是很不錯了！bootstrap中文網其實也跟這個類似。個人猜測，這些中文網可能跟國外官網的關系都不大，只是國內熱心的技術人員為了技術交流而自行創立的，網站內容基本是源於官網的。
轉載請注明出處：http://www.cnblogs.com/zrtqsk/p/4013980.html 謝謝！