非常漂亮的免費純JavaScript圖表庫

Highcharts是什麼？

Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，並且免費提供給個人學習、個人網站和非商業用途使用。目前HighCharts支援的圖表類型有曲線圖、區域圖、長條圖、圓餅圖、散狀點圖和綜合圖表。

HighCharts介面美觀，由於使用JavaScript編寫，所以不需要像Flash和Java那樣需要插件才可以運行，而且運行速度快。另外HighCharts還有很好的相容性，能夠完美支援目前大多數瀏覽器。現在官方的最新版本為HighCharts2.3.5。

特點

具有良好的兼容性：它可以在所有現代瀏覽器中很好地工作，包括iPhone，iPad甚至Internet Explorer 6。標準的瀏覽器使用SVG進行圖形繪製，而在傳統的Internet Explorer則使用VML進行繪製。

對非商業用戶完全免費：無論你想要在個人網站，學校網站或是任何一個非營利組織中使用Highcharts，你都不需要經過授權。

開源：無論你使用的是Highcharts的免費版本還是商業授權版本，你都可以下載它的源代碼並作出自己的修改，這給予了用戶極大的自由度。

純粹的JavaScript：Highcharts是完全基於本機瀏覽器技術的，不需要像Flash或Java那樣依賴客戶端插件。此外，你不需要在伺服器上安裝任何東西，包括PHP或ASP.NET。 Highcharts只需要兩個核心檔案：highcharts.js核心檔案和jQuery，MooTools或Prototype框架的其中之一，而這個框架可能已經早就在你的網頁中使用了。

眾多的圖表類型：Highcharts支援直線圖，曲線圖、區域圖、區域曲線圖、長條圖、餅裝圖、散佈圖等常見的圖表類型，並且能夠將他們結合在一個圖表中。

簡單的設定語法：設定Highcharts不需要任何的程式設計技術，它的設定變數只需要一個簡單的JavaScript物件。

動態：在創建圖表後的任何時候，你都可以透過一個完整的API對系列和資料點進行添加，刪除和修改，也對座標軸進行修改。許多事件都提供了為圖表進行程式設計的鉤子，結合jQuery，MooTools或Prototype框架的AJAX API，它甚至提供了能夠即時動態地顯示伺服器資料的解決方案。

多軸：有時候你需要比較不同度量的數據，例如溫度，降雨量和空氣壓力，Highcharts可以讓你為每個數據集設定不同的Y軸，而如果你想要比較不同類別的數據，也可以設定不同的X軸。每個軸都可以放置在圖表上下左右的任何位置，所有選項都可以單獨設置，包括翻轉，風格和位置。

提示標籤：當滑鼠停在圖表的任何一個點或一個系列，都可以顯示一個包含相關資訊的工具列提示，而當滑鼠在圖表上移動時，它會自動選擇離滑鼠最近的點來進行顯示，這對查看圖表數據提供了極大的便利。

時間軸：75%的圖表都帶有一個時間軸作為X軸，Highcharts非常智能，甚至可以精確到毫秒，它也可以標誌出一個月的開始或一周的開始，甚至午夜和正午等等。

匯出和列印：如果啟用了匯出模組，您的使用者可以透過點擊匯出按鈕將圖表匯出為PNG, JPG, PDF或SVG格式，也可以直接將其列印出來。

縮放：你可以透過縮放來更仔細地查看你對圖表中感興趣的部分，縮放可以作用在X軸或Y軸上，也可以同時作用在兩個軸上。

外部資料載入：Highcharts的資料來自於一個JavaScript數組，因此資料可以定義在一個本機設定物件中，也可以定義在一個單獨的檔案中，甚至可以來自不同的網站。此外，資料可以以任何形式傳遞給Highcharts，只需一個將資料解析為數組的回調函數。

角度計：針對儀錶板和角度計等，Highcharts提供了一種類似速度計的圖表，讓你可以一目了然地查看數據。

極座標圖表：笛卡爾座標系的圖表可以很簡單的選項轉換成極座標系圖表或徑向圖。

倒轉或翻轉圖表：有時候你需要將圖表翻轉，使X軸垂直，這也是支援的。

旋轉標籤：所有的文字標籤，包括軸標籤，資料點標籤和座標軸標題標籤，都可以進行任意角度的旋轉。

調用方式

var chart = new Highcharts.Chart({

        chart: {…}

       colors: [{}

           exporting: {…}

        global: { …}

        labels: {…}

        lang：{…}

      圖例：{…}

        載入：{…}

)    

        繪圖選項：{…}

        系列：[{… }]

        子標題：{…}

        標題：{…}

       yAxis：{…}

});