highcharts的使用

Highcharts 是一個使用javascript 腳原本生成圖表的工具，和jfreechart 做用相似，都用來生成各類圖表，並支持圖片的導出和打印。

從官網 www.highcharts.com  上下載的壓縮表中的example中有各類圖表的例子。

要編寫生成圖表的例子建議從 文件名後帶 basic 的文件看起，看到例子後你會發現，highcharts使用起來時很是簡單的，咱們要作的僅僅是把數據組織好，讓在頁面onload時把數據設置到 組件（Highcharts.Chart）中便可。

 

1、 改改自帶的例子

先來個例子：

第一步：  下載Highcharts-2.1.3.zip 包 和 jquery-min-1.4.2.js 

如下兩個文件的下載地址：

http://www.highcharts.com/download

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

 

第二步： 建立一個html文件在文件的head標籤部分，加入對相關js文件的引入：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Highcharts的核心文件

<script type="text/javascript" src="../js/highcharts.js"></script>

處理導出圖片功能的js文件

<script type="text/javascript" src="../js/modules/exporting.js"></script>

 

第三步：編寫相關js代碼

在上面的導入js文件代碼後繼續加入如下代碼：

 

              <!-- 2. Add the JavaScript to initialize the chart on document ready -->

              <script type="text/javascript">

             

                     var chart;

                     $(document).ready(function() {

                            chart = new Highcharts.Chart({

                                   chart: {

                                          renderTo: 'container',

                                          defaultSeriesType: 'line',

                                          marginRight: 130,

                                          marginBottom: 25

                                   },

                                   title: {

                                          text: 'Monthly Average Temperature',

                                          x: -20 //center

                                   },

                                   subtitle: {

                                          text: 'Source: WorldClimate.com',

                                          x: -20

                                   },

                                   xAxis: {

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

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

                                   },

                                   yAxis: {

                                          title: {

                                                 text: 'Temperature (°C)' 

                                   },

                                          plotLines: [{

                                                 value: 0,

                                                 width: 1,

                                                 color: '#808080'

                                          }]

                                   },

                                   tooltip: {

                                          formatter: function() {

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

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

                                          }

                                   },

                                   legend: {

                                          layout: 'vertical',

                                          align: 'right',

                                          verticalAlign: 'top',

                                          x: -10,

                                          y: 100,

                                          borderWidth: 0

                                   },

                                   series: [{

                                          name: 'Tokyo',

                                          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

                                   }, {

                                          name: 'New York',

                                          data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

                                   }, {

                                          name: 'Berlin',

                                          data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

                                   }, {

                                          name: 'London',

                                          data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

                                   }]

                            });

                           

                           

                     });

                           

              </script>

 

第四步：準備存放圖片的容器

在<body> 標籤中加入：

<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

 

運行下試試。

這樣就完成了一個最基本的曲線圖的例子。

接下來的是若是咱們要本身實現一個該怎麼弄？

很簡單，修改例子代碼就能夠了，用不着本身從新寫代碼。

1.先對比剛纔寫的例子的代碼和 效果，看看那些東西咱們能夠修改：

  

 

很明顯，標題的文字、縱軸的單位，橫軸的文字，這些都要修改，數據部分先無論。

因而，在html文件中，修改 標題爲： 個人標題

修改代碼爲：

title: {

                                          text: '個人標題',

                                          x: -20 //center

                                   },

 

保存再打開html， 我本身在試驗的使用用的是ultraEdit 編輯器編輯的html文件，發現文件裏面的攝氏度出現亂碼，

當時沒在乎，用firefox查看源文件，把 攝氏度這個符號給copy 過來了，保存後打開時沒出現效果。

而後查看源文件的時候出現亂碼，應該是編輯器把文件的編碼修改了，因此在改的時候最好用記事本，保存時，保存爲utf-8編碼的。或者乾脆放在咱們的開發工具中修改。

改後的效果以下：

 

接着把 子標題、縱軸的單位 和 鼠標移上圖片時提示中的內容也進行修改

                     subtitle: {//修改子標題

                                          text: '來源：bits.digitalchina.com',

                                          x: -20

                     },

      

yAxis: {//修改縱軸單位文字

                        title: {

                            text: '溫度 (攝氏度)'

                        },

                        plotLines: [{

                            value: 0,

                            width: 1,

                            color: '#808080'

                        }]

                    },

 

 

tooltip: {

                                  

 

       formatter: function() {

                                            return '<b>'+

 

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

                                                        this.x

 

+': '+ this.y +'攝氏度';

                                          }

                    

 

              },

 

 

 

修改這些東西都很簡單，只用在html中找到這些字符，而後替換就能夠了。

 

接下來的是數據了。

咱們看一下橫軸的數據，這些值都定義在：

xAxis: {

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

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

},

咱們再想一想，這個曲線是怎麼畫出來的？

無非是X、y軸的值肯定一點，多點連成線。

查看代碼中表示數據的部分：

series: [{

                        name: 'Tokyo',

                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

                    }, {

                        name: 'New York',

                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

                    }, {

                        name: 'Berlin',

                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

                    }, {

                        name: 'London',

                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

                    }]

上面的series 屬性是一個數組，該數組中有四個json 對象，而圖上恰好是四條線，因此應該是一個json對象對應一條線，並且name屬性值也說明了這點。

咱們如今只要弄懂一條線是怎麼來的，就好辦了。

拿其中一條來講

{name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}

表示的是Tokyo 的數據，data裏面存放的是一維數組，查看tokyo對應的那條線發現

這些值恰好是那些點的縱軸的值。那橫軸呢？

橫軸恰好是xAxis: {

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

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

},

這時你會想到，原來xAxis 就是表示點的x軸線值，而xAxis  這個數組的長度也確定和data的長度同樣，這樣恰好一個肯定縱軸，一個肯定橫軸。

這樣就能夠表示tokyo這個城市 Jan 的溫度 是 7.0

 Feb 的溫度是 6.9

 ...........

 

 

如今問你，若是隻要一條線呢？把 series 中只保留一個元素便可。如：

 

 

series: [{

       name: 'Tokyo',

       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

 }]

 

          若是隻要 Jan, Feb ， Mar 這三個月的溫度呢? 修改 data，只要前三個月的數字，固然還要修改 xAxis

series: [{

       name: 'Tokyo',

       data: [7.0, 6.9, 9.5]

 }]

 

xAxis: {

                        categories: ['Jan', 'Feb', 'Mar']

},

 

如今我想圖片上最明顯的要修改的部分，均可以改了，咱們應該可使用它了。

 

 

2、本身動手寫一個jsp，加載從服務端獲取的數據。

第一步、在web工程下 新建一個jsp， 將相關的js文件放到項目中

仍是拷貝剛纔的javascript 和 html代碼 到jsp中

發佈項目，打開這個jsp以確保引入的js文件路徑沒有問題。

 

第二步、準備服務端代碼，咱們準備仍是用剛纔的那個氣溫的例子，

在服務端拼接好series 屬性須要的字符串，能夠就用servlet完成，

核心代碼以下：

doPost(......){

//........

Out.println(

"["+

"{name: 'Tokyo',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, "+

"{name: 'New York',data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, "+

"{name: 'Berlin',data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, "+

"{name: 'London',data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}"+

"]"

);

//......

}

Web.xml 中的配置：

    <servlet>

        <servlet-name>pp</servlet-name>

        <servlet-class>cn.dc.serverlt.HighChartsServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>pp</servlet-name>

        <url-pattern>/pp.do</url-pattern>

    </servlet-mapping>

 

第三 步、修改jsp:

<script type="text/javascript">

            $(document).ready(function() {

           

                var options = {

                    chart: {

                        renderTo:'container',

                        defaultSeriesType: 'line',

                        marginRight: 130,

                        marginBottom: 25

                    },

                    credits:{

                            href:'http://bits.digitalchina.com',

                            text:'bits'

                    },

                    title: {

                        text: '昨日系統訪問數量統計圖',

                        x: -20 //center

                    },

                    subtitle: {

                        text: 'Source: bits',

                        x: -20

                    },

                    xAxis: {

                        categories: []

                    },

                    yAxis: {

                        title: {

                            text: '個/小時'

                        },

                        plotLines: [{

                            value: 0,

                            width: 1,

                            color: '#808080'

                        }]

                    },

                    tooltip: {

                        formatter: function() {

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

                                this.x +': '+ this.y +'個';

                        }

                    },

                    legend: {

                        layout: 'vertical',

                        align: 'right',

                        verticalAlign: 'top',

                        x: -10,

                        y: 100,

                        borderWidth: 0

                    },

                    exporting: {

                            filename: "chart",

                            type: "image/png",

                            url: 'http://localhost:8888/dcweb/pp.do',

                            width: 800

                    },

                    series:[]

                };

                $.get('/infoAdmin/visitorStatistics.do', function(data) {

                    // Create the chart

                    alert(data);

                    data = eval("("+data+")");

                    alert(data);

                    options.series.push(data);

                    var chart = new Highcharts.Chart(options);

                });

            });

        </script>

 

 

這裏我沒有先定義chart，而是先定義一個普通的javascript 對象options,

而後給其設置一個series 的數組屬性（值是空的），

而後發送異步請求獲取數據，

將響應數據作處理，被設置到options 對象的series屬性上。

這樣options 對象實際上有了Highcharts.Chart  所需的全部配置屬性信息。

咱們在用options 來構建一個 Highcharts.Chart 對象。

 

之因此沒有直接先定義 Highcharts.Chart  是由於，定義以後不能直接在初始化時設置值，而圖表是在產生new Highcharts.Chart 對象後當即生成的，因此確定就沒有數據了。

 

 

 

到如今，我也不清楚裏面的每一個參數是作什麼的，可是能夠查文檔，如下是文檔的訪問地址：http://www.highcharts.com/ref/， 文檔還不知道怎麼下載下來，你們只能先看在線的文檔了。

注意看的時候對照例子中的js代碼，這樣你大概就能知道一些基本參數的做用了。

 

咱們的項目中用的話，應該不會要很複雜的功能，因此能基本應付開發須要。

 

3、怎麼去掉圖表右下角的 Highcharts.com 的標誌？

1.最笨的方法： 改源碼，查找 highcharts.com 這是我首先想到的。

2. 查看api時發現了

credits:{

                            href:'http://bits.digitalchina.com',

                            text:'bits'

    }

 

這樣就能夠隨意修改爲咱們本身的了。

 

4、圖片導出，怎麼變成咱們本身的呢，而不是每次都請求

Exports.highcharts.com？

原本若是要是沒有中文亂碼的話，我也不會去找替代方案。

咱們點擊導出圖片的時候其實是吧svg圖片數據以post請求的方式發送給了

Exports.highcharts.com， 該站點是以php程序出來這些數據的。

（有興趣的同志能夠用firebug或httpwatch工具查看下發送的請求數據）

如今知道是發svg圖片數據發送給服務端去處理的，那麼要解決中文亂碼就小菜一碟了，

request.setCharacterEncoding("utf-8");

就能夠搞定了。

    

這個是從某位高手那裏找來的，老外寫的，用java來處理svg 圖片數據導出各類圖片。

使用的是apache 的batik, 必須下載batik的jar包，

這個包是幹嗎的？我如今只知道是用來將svg 圖片數據轉成各類格式圖片的。

 

 

代碼以下

package cn.dc.serverlt;

 

 

import java.io.IOException;

import java.io.StringReader;

 

import javax.servlet.ServletException;

import javax.servlet.ServletOutputStream;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.batik.transcoder.Transcoder;

import org.apache.batik.transcoder.TranscoderException;

import org.apache.batik.transcoder.TranscoderInput;

import org.apache.batik.transcoder.TranscoderOutput;

import org.apache.batik.transcoder.image.JPEGTranscoder;

import org.apache.batik.transcoder.image.PNGTranscoder;

import org.apache.fop.svg.PDFTranscoder;

 

/**

* Servlet implementation class for the batik Transcoder

* @Thanks przemyslaw

*/

public class HighChartsServlet extends HttpServlet {

   

   private static final long serialVersionUID = 3920224595120519682L;

  

    public HighChartsServlet() {

      super();

   }     

 

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

      doPost(request,response);

   }    

  

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

      request.setCharacterEncoding("utf-8");

      String type = request.getParameter("type");

      String svg = request.getParameter("svg");

      ServletOutputStream out = response.getOutputStream();

      if (null != type && null != svg){

      // This line is necessary due to a bug in the highcharts SVG generator for IE

      // I'm guessing it wont be needed later.

      svg = svg.replaceAll(":rect", "rect");

      String ext = "";

      Transcoder t = null;

     

      if (type.equals("image/png")) {

         ext = "png";

         t = new PNGTranscoder();

        

      } else if (type.equals("image/jpeg")) {

         ext = "jpg";

          t = new JPEGTranscoder();

 

      } else if (type.equals("application/pdf")) {

         ext = "pdf";

         t = new PDFTranscoder();

 

      } else if (type.equals("image/svg+xml")) {

         ext = "svg";  

      }

     

      response.addHeader("Content-Disposition", "attachment; filename=chart."+ext);

      response.addHeader("Content-Type", type);

     

         if (null != t){

            TranscoderInput input = new TranscoderInput(new StringReader(svg));

            TranscoderOutput output = new TranscoderOutput(out);

            try {

               t.transcode(input,output);

            } catch (TranscoderException e){

               out.print("Problem transcoding stream. See the web logs for more details.");

               e.printStackTrace();

            }

  

         } else if (ext == "svg"){

            out.print(svg);

         } else {

            out.print("Invalid type: " + type);

         }

      } else {

         response.addHeader("Content-Type", "text/html");

         out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted.\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");

      }

      out.flush();

      out.close();  

   }

}

 

Over了，如今基本的使用你們應該沒什麼問題了，若是還想發掘更好的效果，就得本身學習了！