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插件
目前来说,可以在其中选择一两种完全可以满足我们的开发需求;
局限性很大:例如只能展示在jsp页面,而且使用起来比较杂乱
给个例子:生成柱状图
packagecom.xidian.servlet;importjava.awt.Color;importjava.awt.Font;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.jfree.chart.ChartFactory;importorg.jfree.chart.ChartUtilities;importorg.jfree.chart.JFreeChart;importorg.jfree.chart.axis.CategoryAxis;importorg.jfree.chart.axis.NumberAxis;importorg.jfree.chart.plot.CategoryPlot;importorg.jfree.chart.plot.PlotOrientation;importorg.jfree.chart.renderer.category.BarRenderer;importorg.jfree.chart.title.TextTitle;importorg.jfree.data.category.DefaultCategoryDataset;/*** 生产柱状图
* @说明
*@authorcuisuqiang
*@version1.0
*@since
*/@SuppressWarnings("serial")public class PillarServlet extendsHttpServlet {
@Overrideprotected voidservice(HttpServletRequest request,
HttpServletResponse response)throwsServletException, IOException {
response.setContentType("text/html");//使用普通数据集
DefaultCategoryDataset chartDate = newDefaultCategoryDataset();//增加测试数据,第一个参数是访问量,最后一个是时间,中间是显示用不考虑
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(newTextTitle(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插件来的方便