WEB开发中的图表展示方法

最近的项目中有一个功能点,要求对各种指标数据通过图表的方式展示出来,前段的展示涉及到浏览器,IOS和ANDROID平台。翻看了网上关于图表的相关资料,结合项目的实际情况,得到了两种解决方案:

1.在后台Java服务端根据数据生成图表形式的。

2.后台服务提供需要展示的数据,前台分别使用图表框架进行展示。

经过技术验证,这两种情况分别可以使用的现成框框架有:

1.后台生成图片,使用jfreechart.jar来生成对应的图标图片。jfreechart的官方网站是:http://www.jfree.org/jfreechart/,可以在此下载最新的版本。jfreechart采用LGPL协议,可以在第三方开发中使用,并且不需要开源。

jfreechart的用法很简单,最基本的用法如下:

 

DefaultPieDataset dataset = new DefaultPieDataset();
dataset.setValue("Category 1", 43.2);
dataset.setValue("Category 2", 27.9);
dataset.setValue("Category 3", 79.5);
JFreeChart chart = ChartFactory.createPieChart(null, dataset, false, false, false);

 可以使用提供的ChartUtilities工具类,把结果保存为具体的图片,也可以通过流的形式输出。

 

 

2.针对前台使用数据直接生成图表的解决方式,针对不同终端,解决方案分别为:

浏览器:Highcharts,Highstock

IOS:Core Plot

android:Achartengine

这里重点介绍一些Highcharts,Highstock。这两个产品是同一家公司的,官网网址:http://www.highcharts.com/。产品可免费使用,可自行修改。采用纯JS的方式实现,在支持svg和vml方式来实现画图,支持ie6+的浏览器,其他浏览器的主要版本。

 

jfreechart和highcharts两种方案的对比:

jfreechart采用服务端生成图片,客户端只是做图片的显示,可以减少展现层对数据生成图片的逻辑处理,各展现层的展示效果一致。缺点就是如果数据有修改,比如通过服务端重新生成图片。

highcharts是浏览器上支持很好的图表插件,图表的生成过程具有动画效果,使用highcharts插件,可以满足常见的图表生成,通过highstock可以做到类似股票一样的展示效果。

 

你可能感兴趣的:(jfreechart,图表,Highcharts)