幾款免費的圖表js插件（轉）

1，ichartjs(國產)(http://www.ichartjs.com/)  ===============強烈推薦
ichartjs是一款優秀的國產開源插件，作者是王鶴，英文名taylor，畢業於南昌大學軟件工程專業。
ichartjs 是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標簽繪制各式圖形。 ichartjs致力於為您的應用提供簡單、直觀、可交互的體驗級圖表組件。是WEB/APP圖表展示方面的解決方案 。如果你正在開發HTML5的應用，ichartjs正好適合您。 ichartjs目前支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖。ichartjs是基於Apache License 2.0協議的開源項目。

 

2，echarts(國產)(http://echarts.baidu.com/)
Echarts是百度前端團隊做的基於html5-canvas的開源圖表繪制組件。
幾個特性如下：
拖拽重計算：拖拽重計算特性（專利）帶來了數據統計圖表從未有過的用戶體驗，允許用戶對統計數據進行有效的提取、整合，甚至在多個圖表間交換數據，賦予了用戶對數據進行挖掘、整合的能力。
大 規模數據模式：如何展現成千上百萬的數據？貌似除了用專業的統計工具（如MATLAB）外別無選擇？不，在擁有眾多交互特性下ECharts依然可以做到 直角系圖表（折、柱、散點、K線）20萬數據秒級出圖。    值域漫游：基於坐標的圖表（如地圖、散點圖）通過色彩變化表現數值的大小能直觀形象的展示數據分布。但如何聚焦到我所關心的數值上？ECharts擁有值 域漫游的功能，讓你可以輕松進行數值篩選

 

3，Chart.js(http://www.chartjs.org/)
小巧而輕便的的圖表插件，缺點是支持的圖形類型較少，數據交互功能也非常有限，但作者以后可能會逐漸完善。
10款免費而優秀的圖表JS插件

4，HighChart.js(http://www.highcharts.com/)

5，Jqplot(http://www.jqplot.com/)
一個相當古老而“堅挺”的圖表插件，支持現代瀏覽器和IE7，IE8（和LoongChart一樣，拋棄IE6了）。
10款免費而優秀的圖表JS插件

 

目前來說，可以在其中選擇一兩種完全可以滿足我們的開發需求;

當然，還有我們最原始的方法:使用 jfreechart 生成 曲線、柱狀圖、餅狀圖、分布圖 展示到JSP

局限性很大:例如只能展示在jsp頁面，而且使用起來比較雜亂

給個例子:生成柱狀圖

    package com.xidian.servlet;  
    import java.awt.Color;  
    import java.awt.Font;  
    import java.io.IOException;  
    import javax.servlet.ServletException;  
    import javax.servlet.http.HttpServlet;  
    import javax.servlet.http.HttpServletRequest;  
    import javax.servlet.http.HttpServletResponse;  
    import org.jfree.chart.ChartFactory;  
    import org.jfree.chart.ChartUtilities;  
    import org.jfree.chart.JFreeChart;  
    import org.jfree.chart.axis.CategoryAxis;  
    import org.jfree.chart.axis.NumberAxis;  
    import org.jfree.chart.plot.CategoryPlot;  
    import org.jfree.chart.plot.PlotOrientation;  
    import org.jfree.chart.renderer.category.BarRenderer;  
    import org.jfree.chart.title.TextTitle;  
    import org.jfree.data.category.DefaultCategoryDataset;  
      
    /** 
     * 生產柱狀圖 
     * @說明  
     * @author cuisuqiang 
     * @version 1.0 
     * @since 
     */  
    @SuppressWarnings("serial")  
    public class PillarServlet extends HttpServlet {  
        @Override  
        protected void service(HttpServletRequest request,  
                HttpServletResponse response) throws ServletException, IOException {  
            response.setContentType("text/html");  
            // 使用普通數據集  
            DefaultCategoryDataset chartDate = new DefaultCategoryDataset();  
            // 增加測試數據，第一個參數是訪問量，最后一個是時間，中間是顯示用不考慮  
            chartDate.addValue(55, "訪問量", "2010-01");  
            chartDate.addValue(65, "訪問量", "2010-02");  
            chartDate.addValue(59, "訪問量", "2010-03");  
            chartDate.addValue(156, "訪問量", "2010-04");  
            chartDate.addValue(452, "訪問量", "2010-05");  
            chartDate.addValue(359, "訪問量", "2010-06");  
            try {  
                // 從數據庫中獲得數據集  
                DefaultCategoryDataset data = chartDate;  
                  
                // 使用ChartFactory創建3D柱狀圖，不想使用3D，直接使用createBarChart  
                JFreeChart chart = ChartFactory.createBarChart3D(  
                        "網站月訪問量統計", // 圖表標題  
                        "時間", // 目錄軸的顯示標簽  
                        "訪問量", // 數值軸的顯示標簽  
                        data, // 數據集  
                        PlotOrientation.VERTICAL, // 圖表方向，此處為垂直方向  
                        // PlotOrientation.HORIZONTAL, //圖表方向，此處為水平方向  
                        true, // 是否顯示圖例  
                        true, // 是否生成工具  
                        false // 是否生成URL鏈接  
                        );            
                // 設置整個圖片的背景色  
                chart.setBackgroundPaint(Color.PINK);  
                // 設置圖片有邊框  
                chart.setBorderVisible(true);  
                Font kfont = new Font("宋體", Font.PLAIN, 12);    // 底部  
                Font titleFont = new Font("宋體", Font.BOLD, 25); // 圖片標題  
                // 圖片標題  
                chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont));  
                // 底部  
                chart.getLegend().setItemFont(kfont);  
                // 得到坐標設置字體解決亂碼  
                CategoryPlot categoryplot = (CategoryPlot) chart.getPlot();  
                categoryplot.setDomainGridlinesVisible(true);  
                categoryplot.setRangeCrosshairVisible(true);  
                categoryplot.setRangeCrosshairPaint(Color.blue);  
                NumberAxis numberaxis = (NumberAxis) categoryplot.getRangeAxis();  
                numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());  
                BarRenderer barrenderer = (BarRenderer) categoryplot.getRenderer();  
                barrenderer.setBaseItemLabelFont(new Font("宋體", Font.PLAIN, 12));  
                barrenderer.setSeriesItemLabelFont(1, new Font("宋體", Font.PLAIN, 12));  
                CategoryAxis domainAxis = categoryplot.getDomainAxis();           
                /*------設置X軸坐標上的文字-----------*/  
                domainAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 11));  
                /*------設置X軸的標題文字------------*/  
                domainAxis.setLabelFont(new Font("宋體", Font.PLAIN, 12));  
                /*------設置Y軸坐標上的文字-----------*/  
                numberaxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 12));  
                /*------設置Y軸的標題文字------------*/  
                numberaxis.setLabelFont(new Font("宋體", Font.PLAIN, 12));  
                /*------這句代碼解決了底部漢字亂碼的問題-----------*/  
                chart.getLegend().setItemFont(new Font("宋體", Font.PLAIN, 12));  
                // 生成圖片並輸出  
                ChartUtilities.writeChartAsJPEG(response.getOutputStream(), 1.0f,  
                        chart, 500, 300, null);  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        }  
    }  

由代碼來看，遠沒有使用js插件來的方便