2015年5月8日 星期五

Highcharts 執行環境配置

今天在這個網站看到 Highcharts 的介紹, 對其功能大為驚豔 :

# 5个最顶级jQuery图表类库插件-Charting plugin

功能實在太強大了, 繪製的圖美美的, 非常 Professional. 這是一家來自挪威的小而美軟體公司 Highsoft AS 的產品, 利用 jQuery 與 HTML5 技術推出一系列資料視覺化工具 (Data Visualization Tools), 目前有五套 :
  1. Hightcharts : 用於繪製一般統計圖表
  2. Hightstock : 用於繪製金融資訊圖表
  3. Highmaps : 用於繪製地理圖表 (新產品)
  4. Highslide JS : 用於圖片視頻展示
  5. Highcharts Cloud : Highcharts 雲端內容提供平台 (免費試用中)
我目前最有興趣的是 Highstock, 不過還是得先從 Highchart 學起. Hightchart 源自該公司創辦人兼技術長 Torstein 為了顯示其下雪厚度的量測圖, 四處找尋適合的工具卻不可得, 才自行研發出 Highcharts. 當時正是 Flash 大行其道的時代, 但 Torstein 希望使用開放標準的非專利產品, Flash 顯然不敷需求. 於是在自行開發時使用的是開源的 HTML5 與 jQuery.

Higharts 採用 CC (Creative Commons) 創用授權, 只要遵循此要求, 對於個人及非營利用途, 可自由免費使用. 商業用途則每個網站收費 $90 元美金, 詳見 :

# https://shop.highsoft.com/highcharts.html

Highchrts 相關書籍目前有四本 :

# Learning Highcharts, Packt 出版
# Highcharts Cookbook, Packt 出版
# Highcharts Essentials, Packt 出版
# Beginning JavaScript charts with jqPlot, D3, and Highcharts, Apress 出版

前三本 Packt 的都是 Highcharts 專書, 而第四本 Apress 的主要是介紹 jqPlot 與 D3, 而 Highcharts 只是在第 18 章前面簡介一下如何從 jqPlot 過渡到 Hicharts 而已. 我個人覺得 jqPlot 較麻煩, 要引入一堆 js 檔, 設定上也比 Highcharts 囉嗦, 而檔案也沒有比較小.

使用 Highcharts 需先布置執行環境, 設定樣式表與函式庫來源. 若是本地網路使用, 請先下載 Highcharts :

# http://www.highcharts.com/download

解開後目錄結構如下 :


切到 js 目錄下, 其中第一個 hicharts.js 就是我們需要的檔案. 將其複製到專案目錄下, 我是放在 jquery 目錄下跟 jquery.js 放一起 :


這樣只要搭配 jQuery 就可以使用了. 下面參考 Document 中的範例 加以改編如下 :

範例 1 : http://tony1966.xyz/test/jquerytest/highcharts-1.htm [看原始碼]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highchart 測試</title>
  <script src="../jquery/jquery.js"></script>
  <script src="../jquery/highcharts.js"></script>
</head>
<body>
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
  </div>
  <script>
    $(function () {
      $('#container').highcharts({
    $(function () {
      $('#container').highcharts({
        chart: {type: 'bar'},
        title: {text: '零食消耗統計'},
        xAxis: {categories: ['冰棒', '小熊餅乾', '泡麵']},
        yAxis: {title: {text: '被吃掉的零食'}},
        series: [
          {name: '小葵', data: [1, 2, 4]},
          {name: '小新', data: [5, 7, 3]}
          ]
        });
      });
  </script>
</body>
</html>


當然也可以從 CDN 取得函式庫, 其 CDN 位置如下 :

# Highchart CDN

只要把 script 部分改為如下即可 :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>

範例 2 : http://tony1966.xyz/test/jquerytest/highcharts-2.htm [看原始碼]

此處 jQuery 使用 Google 的 CDN 供檔.

# Google CDN (hosted library)

下面範例三折線圖改自解壓縮後的 examples\line-basics 下的 index.html :

範例 3 : http://tony1966.xyz/test/jquerytest/highcharts-3.htm [看原始碼]

參考 :

# 初探 HighCharts 畫報表圖的好幫手 教學
# [jQuery] Javascript plotting library 畫圖 chart

於

沒有留言:

張貼留言