转：几款免费的图表js插件

2022-11-21 19:51:44

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插件来的方便

码农公寓

相关文章