Ichartjs Helper介绍

非常感谢ichartjs作者们免费为大家提供的漂亮的专业的简单易用的无与伦比的图表控件。

ichartjs helper是什么？

在ichartjs官方的所有示例中所有的图表都需要提供一组json格式的数据（如data和labels）供ichartjs绘制，实际应用中这些json数据是需要服务器端动态传递到浏览器，而不是作为一个静态页方式存在。ichartjs helper就是能够帮你在服务器端方便生成图表需要的json数据的一套java类库。

拼接这些json数据是一件很简单的事情，我们可以使用诸如Jackson这样的开源类库，事实上笔者也只是对Jackson进行了简单的封装，达到更高效使用ichart的目的。

使用ichartjs helper便可以避免关注拼接图表json数据格式的细节，不需要为页面的每个图表都实现一个拼接json的方法,省事省心好维护。

入门使用示例

我们以官方的一个柱形图为例说明ichart helper使用（请访问以下网址对照本文档示例效果更好）

（http://www.ichartjs.com/samples/index.html?page=column2d_01.html&pageno=2）

服务端

使用ichatjs helper：

public String getColum2DJson() {

List nVCLs = new ArrayList();

nVCLs.add(new IchartNVCL("IE", 35.75,"#a5c2d5"));

nVCLs.add(new IchartNVCL("Chrome", 29.84,"#cbab4f"));

nVCLs.add(new IchartNVCL("Firefox",24.88,"#76a871"));

nVCLs.add(new IchartNVCL("Safari", 6.77,"#9f7961"));

nVCLs.add(new IchartNVCL("Opera", 2.02,"#a56f8f"));

nVCLs.add(new IchartNVCL("Other", 0.73,"#6f83a5"));

Column2D column2D = new Column2D(nVCLs);

return column2D.toIchartJson();

}

调用将会生成如下的json格式数据

{data ：[{name : 'IE',value : 35.75,color:'#a5c2d5'},

{name : 'Chrome',value : 29.84,color:'#cbab4f'},

{name : 'Firefox',value : 24.88,color:'#76a871'},

{name : 'Safari',value : 6.77,color:'#9f7961'},

{name : 'Opera',value : 2.02,color:'#a56f8f'},

{name : 'Other',value : 0.73,color:'#6f83a5'}]};

客户端：

页面可以用以下方式绑定或者使用Ajax方式从后台请求数据，这里演示直接绑定在页面。

$(function(){    

        new iChart.Column2D({

        render : 'canvasDiv',

        data: jQuery.parseJSON('${ichartdata!}').data;,

        title : 'Top 5 Browsers from 1 to 29 Feb 2012',

        showpercent:true,

        decimalsnum:2,

//....省略其他代码

}).draw();

});

4.ichart helper支持以下组件

Area2D

Bar2D

BarStacked2D

Column2D

Column3D

ColumnMulti2D

ColumnMulti3D

ColumnStacked2D

ColumnStacked3D

Donut2D

LineBasic2D

Pie2D

Pie3D

5.demo

下载地址：点击下载

下载ichart helper后demo文件夹下demo-server.html和demo-client.html是另一个使用Icharjs helper的源码，它演示了ichartjs Helper在多数据面积图的使用，并且备注也更加详细。

(http://www.ichartjs.com/samples/index.html?page=area2d_02.html&pageno=0)

您可能感兴趣的文章: