转：几款免费的图表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插件来的方便