Highcharts下載與使用_數據報表圖

Highcharts簡介

Highcharts:功能強大、開源、美觀、圖表豐富、兼容絕大多數瀏覽器的純js圖表庫

Highcharts是一款純javascript編寫的圖表庫，可以很簡單便捷的在Web網站或Web應用中添加交互性的圖表，Highcharts目前支持直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不一樣類型的圖表，能夠知足你對Web圖表的任何需求 ！

因爲其功能強大、簡單易用、開源免費等優勢，Highcharts在國內外愈來愈受歡迎。下面詳細說明Highcharts的優點

Highcharts優點

兼容性

Highcharts支持目前全部的現代瀏覽器，包括IE6 +、iPhone/iPad、Android。Highcharts在標準（W3C標準）瀏覽器中使用SVG技術渲染圖形，在遺留的IE瀏覽器中使用VML技術來繪圖。

開源免費

針對我的用戶及非商業用途免費，並提供源代碼下載，你能夠任意的修改它。商業用途須要購買許可，我的及非商業用途須遵循CC BY-NC 3.0協議

純Javascript

Highcharts徹底基於本地瀏覽器技術，不須要任何插件（例如Flash、java），不須要安裝任何服務器環境或動態語言庫支持，只須要兩個js文件便可運行。

圖表類型豐富

Highcharts目前支持直線圖、曲線圖、面積圖、曲線面積圖、面積範圍圖、曲線面積範圍圖、柱狀圖、柱狀範圍圖、條形圖、餅圖、散點圖、箱線圖、氣泡圖、偏差線圖、漏斗圖、儀表圖、瀑布圖、雷達圖，共18種類型圖表，其中不少圖表能夠集成在同一個圖形中造成綜合圖。

動態性

提供豐富的API接口，方便在建立圖表後對圖表的任意點、線和文字等進行增長、刪除和修改操做。支持衆多的Javascript事件，結合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口，能夠實時地從服務器取得數據並實時刷新圖表。

多軸支持

對於須要比較的數據，Highcharts提供多軸支持。而且能夠針對每一個軸設置其位置、文字和樣式等屬性。

動態提示框

當鼠標懸停在圖表上的數據點時，Highcharts會顯示信息提示框，固然，顯示的內容和樣式能夠本身指定和設置。

圖表導出和打印功能

你能夠將Highcharts圖表導出爲PNG、JPG、PDF和SVG格式文件或直接在網頁上打印出來。

圖表縮放

能夠設置圖表的縮放，讓你更方便查看圖表數據。

支持外部數據加載

Highcharts支持多種數據形式，能夠是Javascript數組、json文件、json對象和表格數據等，這些數據來源能夠是本地、不一樣頁面，甚至是不一樣網站。

 

Highcharts下載與使用

下載便可運行，看例子代碼就能夠入門

下載

• 中文網下載中心：http://www.hcharts.cn/product/download.php
• 官方下載：http://www.highcharts.com/download
• Github 開源項目：https://github.com/highslide-software/highcharts.com
• 中文網開放CDN ： http://cdn.hcharts.cn
• 官方 CDN 服務 ： http://code.highcharts.com

解壓下載獲得的壓縮包，進入相應的目錄查看全部包含文件，Highcharts 提供的文件目錄以下圖所示：

目錄結構說明：

|-- examples           例子目錄
|-- exporting-server   導出服務器目錄
|-- gfx                圖片資源目錄
|-- graphics           圖片資源目錄 
|-- js                 全部 js 文件源碼代碼（帶 .src 的文件爲未壓縮版源代碼）
|-- index.htm          例子入口文件

建議初學者從官方提供的例子代碼入手，Highcharts 提供的豐富例子可讓你輕鬆入門。

 

使用方法：只須要引用兩個 JS 文件便可運行

Highcharts 的運行須要兩個 JS 文件， highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 經常使用 JS 框架中的一個。

1：只須要引入下面2個文件就行。其餘礦展看說明。

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

2：建立div容器

在頁面的 body 部分建立一個div，並指定div 的 id，高度和寬度，代碼以下

<div id="container" style="min-width:800px;height:400px"></div>

三、編寫Highcharts代碼

編寫Highcharts必須的代碼，用<script></script>包裹，代碼能夠放在頁面的任意地方，一個最簡單的圖表實例代碼以下

$(function () { 
    $('#container').highcharts({                   //圖表展現容器，與div的id保持一致
        chart: {
            type: 'column'                         //指定圖表的類型，默認是折線圖（line）
        },
        title: {
            text: 'My first Highcharts chart'      //指定圖表標題
        },
        xAxis: {
            categories: ['my', 'first', 'chart']   //指定x軸分組
        },
        yAxis: {
            title: {
                text: 'something'                  //指定y軸的標題
            }
        },
        series: [{                                 //指定數據列
            name: 'Jane',                          //數據列名
            data: [1, 0, 4]                        //數據
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

完成上述兩個步驟後，保存文件並用瀏覽器打開，運行結果以下圖所示

 

參考文檔：

http://www.hcharts.cn/docs/index.php?doc=start-helloworld      

 

2016年4月22號  因爲工做中用到了這個也曾在百度中需找這個功能，找了不少資料；爲了幫助其餘須要的人，寫了這篇文檔給那些須要的人！感謝您的支持

---賴忠標