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

几款免费的图表js插件（转）

猜你喜欢