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可以做到类似股票一样的展示效果。