Highcharts:高互動性的javascript圖表類庫

一、Highcharts簡介：

二、Highcharts圖表預覽

1、直線圖

2、曲線圖

3、散狀圖

4、地區圖

5、地區曲線圖

6、柱狀圖

7、餅狀圖

三、調用方式

1、效果

2、調用代碼

3、代碼說明

四、總結

 

 

一、Highcharts簡介：

 

Highcharts是一個製作圖表的Javascript類庫，可以製作的圖表有：直線圖，曲線圖、地區圖、地區曲線圖、柱狀圖、餅裝圖、散狀圖等等。主要特性：

1、 提示功能：滑鼠移動到圖表的某一點上有提示資訊

2、 放大功能：選中圖表部分放大，近距離觀察圖表

3、 對個人使用者完全免費，這一點很重要的

4、 相容性：相容當今所有的瀏覽器，包括iPhone、IE和Firefox等等

5、 跨語言：不管是PHP、Asp.net還是Java都可以使用，它只需要三個檔案：一個是Highcharts的核心檔案highcharts.js，還有a canvas emulator for IE和Jquery類庫或者MooTools類庫

6、 支援大部分的圖表類型：直線圖，曲線圖、地區圖、地區曲線圖、柱狀圖、餅裝圖、散布圖

7、 易用性：無需要特殊的開發技能，只需要設定一下選項就可以製作適合自己的圖表

8、 時間軸：可以精確到毫秒

9、 Ajax支援： 使用數組接受Ajax傳值

 

二、Highcharts圖表預覽1、直線圖

 

2、曲線圖

 

3、散狀圖

 

 

4、地區圖

 

5、地區曲線圖

 

 

6、柱狀圖

 

7、餅狀圖更多Demo請參考官方網站：http://www.highcharts.com/demo/

 

三、調用方式

以Ajax返回資料到Chat資料群組為例，

1、效果 

 

2、調用代碼

var chart = new Highcharts.Chart({

   chart: {

      renderTo: 'container',

      defaultSeriesType: 'spline'

   },

   title: {

      text: 'Monthly Average Temperature in Tokyo'

   },

   subtitle: {

      text: 'Source: WorldClimate.com'

   },

   xAxis: {

      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 

         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

      title: {

         text: 'Month'

      }

   },

   yAxis: {

      title: {

         text: 'Temperature (°C)'

      }

   },

   legend: {

      enabled: false

   },

   tooltip: {

      formatter: function() {

                return '<b>'+ this.series.name +'</b><br/>'+

            this.x +': '+ this.y +'°C';

      }

   },

   series: [{

      name: 'Tokyo',

      dataURL: 'tokyo.json'

   }]

});

3、代碼說明

       defaultSeriesType：圖表類別，可取值有：line、spline、area、areaspline、bar、column等等

       title：最頂端的標題

subtitle：最頂端的子標題

xAxis：X軸，資料以數組的形式組裝

yAxis：Y軸，資料以數組的形式組裝

tooltip：提示資訊

series：ajax獲得資料放到資料裡面

四、總結

       此chats JS類庫，使用比較簡單，而且樣式多種，效果絢麗。唯一的缺陷是，個人免費的產生的Chat應該會有官方的網址。 不過也是有辦法處理的，對產生的Chat進行Cut，應該可以把官方的網址去掉。

其他連結

<推薦>35個優秀的電子商務網站介面

表單元素：40個CSS/JS風格和功能技術處理

推薦Jquery 40個漂亮的導覽功能表設計