網頁圖表Highcharts實踐教程之圖表程式碼構成

網頁圖表Highcharts實踐教程之圖表程式碼構成

Highcharts第一個例項

下面我們來實現本書的第一個Highcharts例項。

【例項1-1】下面來製作北京連續一週最高溫度折線圖。操作過程如下：

（1）新建一個網頁檔案，命名為Hello.html。同時，將title設定為Hello Highcharts。程式碼如下：

•     

•     

（2）在網頁中新增一個div，設定id為container。

•     

（3）設定該div的樣式，程式碼如下：

•     

（4）引入jQuery指令碼和Highcharts指令碼，程式碼如下：

•     

•     

注意：這裡需要將這兩個指令碼檔案放到Hello.html所在的目錄。

（5）新增圖表繪製程式碼。程式碼如下：

•     

儲存以上檔案，執行結果如圖1.18所示。

圖1.18  第一個例項

Highcharts圖表構成

為了方便大家更好了解Highcharts圖表，這裡從介面和程式碼兩個角度講解Highcharts圖表的實現方式。

Highcharts介面構成

在第一個例項中，我們實現了一個圖表。作為一個圖表，通常是由圖表區、標題、繪圖區、座標軸、圖例/資料列等幾個部分構成，如圖1.19所示。在Highcharts中，每個部分都由一個或者多個元件構成。其中，黑色方框括住的部分就是圖表區。而由座標軸圍起來的部分就是繪圖區。後面將依次講解這幾個部分的實現方式。這裡，大家只要知道每個部分的名稱即可。

圖1.19  圖表構成

Highcharts程式碼構成

雖然我們在第一個例項中並沒有編寫多少程式碼，但圖1.19卻展現豐富的內容。這充分的體現了Highcharts使用的便捷性。實現Highcharts圖表實際分為兩個步驟，依次講解。

1.圖表配置項物件

Highcharts核心主體就是圖表配置項物件。該物件包含了圖表的各類資料和配置資訊。每個部分往往都是由更小的配置項物件組成。使用者只要按照規範的格式，填寫對應的資料和配置值，就可以。整個過程就像搭建積木一樣。下面對第一個例項的配置項物件做簡要介紹。

•             var options = {

•                 chart: {                                                          //圖表基本資訊

•                     type: 'line'                                             //指定圖表型別

•                 },

•                 title: {                                                             //設定圖表標題

•                     text: '北京一週最高溫度'                     //指定標題內容

•                 },

•                 subtitle: {                                                      //設定圖表副標題

•                     text: '2015.02.08--2015.02.14'                  //設定副標題內容

•                 },

•                 series: [{                                                       //定義資料列

•                     name: '最高溫度',                                //指定資料列的標題

•                     data: [7, 11, 8, 7, 9, 9, 9]                    //指定資料節點

•                 }]

•             };

這塊內容也可以使用傳統Javascript逐項賦值的方式實現。從維護角度考慮，推薦使用以上方式實現。

2.在容器中繪製圖表

在指定好配置項物件後，使用者就可以使用Highcharts外掛提供的higcharts方法在指定的容器中繪製圖表。需要的程式碼只需要以下一行。

• $('#container').highcharts(options);

只需要以上兩個步驟，就可以在現有的網頁中繪製出圖1.19所示的圖表了。使用者對圖表進行擴充套件，只需要修改圖表配置物件即可。

Highcharts商業授權和定製開發

在實際Highcharts開發過程中，開發者往往會面對授權問題和複雜需求問題。這裡針對這兩個方面最簡要講解，以幫助開發者更好的使用Highcharts。

Highcharts商業授權

Highcharts是一個非常好的圖表外掛。在使用的時候，它針對個人和非商業應用是全部免費的。對於商業開發，開發者需要購買相應的商業授權。在國內，開發者可以透過Highcharts官方授權的Higcharts中文網（hcharts.cn）購買商業授權。

該網站是國內最權威的Highcharts技術網站。它提供Highcharts各項服務，如商業授權、定製、諮詢等服務。在瀏覽器中輸入網址，就可以進入該網站的商業授權網頁，如圖1.20所示。

圖1.20  商業授權頁面

按照網頁提示，就可以申請購買商業授權。

Highcharts定製開發

在Highcharts中，各類圖表的實現採用模版化機制。使用者只需要極少的設定，就可以配置精美的圖表。但實際開發中，開發者經常面臨各種更為複雜的客戶需求。這個時候，使用Highcharts提供各種配置項往往很難實現。遇到此類問題，使用者可以透過購買定製服務，來解決使用中遇到的難題。

Highcharts中文網提供一流的技術諮詢和定製服務，使用者只需要進入官網的圖表定製服務頁面（如圖1.21），就可以申請響應的服務。

圖1.21  定製服務

本文選自：網頁圖表Highcharts實踐教程基礎篇大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！