Dojo Charting使用说明

Dojo Charting使用说明1 图表的生成要生成图表，页面首先要引入dojo.js文件，然后定义一个div来放图表，div需定义id用来在生成图表时绑定。

1.1 后台数据的准备1.1.1 定义图表信息类ChartInfo该类定义了创建图表的基本参数，不同的图表可能没用到某些参数，在准备数据的函数中任意指定一个值即可。

ChartInfo的定义如下：publicclass ChartInfo {private String chartDiv; //放置图表的divprivate String legend; //放置图例的divprivateboolean legendHorizontal; //图例的方向：true为横向，false为纵向private String chartTitle; //图表标题private String tension; //弯曲程度（张力）private String font; //文本字体private String fontColor; //文本颜色privateboolean markers; //是否显示刻度privateint gap; //指定每个柱形图之间的间隔privateboolean ifLarge; //是否放大(饼图)privateboolean ifMoveOut; //是否移出private ArrayList<ChartData>data; //图表的数据(饼图)public ChartInfo() {this.legendHorizontal=true;this.tension="2";this.markers=true;this.gap=5;this.ifLarge=false;this.ifMoveOut=false;}……1.1.2定义图表数据类ChartData该类用于保存图表的每一组具体数据，最后以list的形式保存到上述的ChartInfo类中，ChartData的定义如下：publicclass ChartData {private String name;//每组数据的名称private ArrayList<Data>dataList = new ArrayList<>();//具体的数据private String strokeColor; //线条颜色privateint strokeWidth; //线条宽度public Data getNewData(){returnnew Data();}publicclass Data{privatedouble value; //值private String text; //图表上显示的文字private String tooltip; //数据的标记，用于鼠标移上去时显示public Data() {this.value=0.0;this.text="";this.tooltip="";}……其中，内部类Data用于保存每一个具体的数据，包含了value、text和tooltip三个属性，每个ChartData对象中包含了多个Data对象。

1.1.3 获取图表数据的函数在servlet中，根据不同类型图表设置不同的参数后，调用公共的方法生成图表数据即可，主要的代码如下：response.setContentType("text/html;charset=utf-8");String chartType = request.getParameter("chartType");GetChartImpl impl = new GetChartImpl();if("column".equals(chartType)){ //柱状图String chartTitle="柱状图测试"; //图表标题String chartDiv="columnChart"; //放置图表的divString legend="columnLegend"; //放置图例的divboolean legendHorizontal=true; //图例的方向：true为横向，false为纵向boolean markers=false; //是否显示刻度String tension="2"; //弯曲程度（张力）int gap=5; //指定每个柱形图之间的间隔//图表数据double[][] values={{12,10,15,18,13},{16,18,20,11,14}};//提示文本，与values一一对应String[][] tooltips={{"12","10","15","18","13"},{"16","18","20","11","14"}};//显示文本，与values一一对应String[][] texts={{"a","b","c","d","e"},{"a","b","c","d","e"}};//每组数组的名称String[] names = {"Series A","Series B"};String result = impl.getColumnChartData(chartTitle,chartDiv,legend,legendHorizontal, tension,gap,markers,values,tooltips,texts,names);response.getWriter().write(result);}elseif("bar".equals(chartType)){ //条形图String chartTitle="条形图测试"; //图表标题String chartDiv="barChart"; //放置图表的divString legend="barLegend"; //放置图例的divboolean legendHorizontal=true; //图例的方向：true为横向，false为纵向boolean markers=true; //是否显示刻度String tension="2"; //弯曲程度（张力）int gap=5; //指定每个柱形图之间的间隔//图表数据double[][] values={{1.1, 0.5, 1.5, 1.2},{0.6, 1.8, 1.2, 0.9},{0.5, 1.2, 1.5, 0.8}};//提示文本，与values一一对应String[][]tooltips={{"12","10","15","18","13"},{"16","18","20","11","14"},{"11","9","12","15","12"}};//显示文本，与values一一对应String[][] texts={{"a","b","c","d","e"},{"a","b","c","d","e"},{"a","b","c","d","e"}};//每组数组的名称String[] names = {"Series A","Series B","Series C"};String result = impl.getBarChartData(chartTitle,chartDiv,legend,legendHorizontal, tension,gap,markers,values,tooltips,texts,names);response.getWriter().write(result);}elseif("line".equals(chartType)){ //曲线图String chartTitle="曲线图测试"; //图表标题String chartDiv="lineChart"; //放置图表的divString legend="lineLegend"; //放置图例的divboolean legendHorizontal=true; //图例的方向：true为横向，false为纵向boolean markers=true; //是否显示刻度String tension="2"; //弯曲程度（张力）:"S"或者"X"等//图表数据double[][] values={{1, 8, 2, 3, 4},{2, 6, 3, 5, 6},{3, 2, 3, 4, 6}};//提示文本，与values一一对应String[][]tooltips={{"12","10","15","18","13"},{"16","18","20","11","14"},{"11","9","12","15","12"}};//显示文本，与values一一对应String[][] texts={{"a","b","c","d","e"},{"a","b","c","d","e"},{"a","b","c","d","e"}};//每组数组的名称String[] names = {"Series 1","Series 2","Series 3"};String[] colors={"red","green","blue"}; //每根线条的颜色int[] widths={2,2,2}; //每根线条的宽度String result = impl.getLineChartData(chartTitle,chartDiv,legend,legendHorizontal,tension,markers,values,tooltips,texts,names,colors,widths);response.getWriter().write(result);}elseif("pie".equals(chartType)){ //饼图String chartTitle="饼图测试"; //图表标题String chartDiv="pieChart"; //放置图表的divString legend="pieLegend"; //放置图例的divboolean legendHorizontal=false; //图例的方向：true为横向，false为纵向boolean markers=false; //是否显示刻度String font = "normal normal 10pt Tahoma"; //文本字体String fontColor="green"; //文本颜色boolean ifLarge=true; //是否放大boolean ifMoveOut=false; //是否移出//图表数据double[][] values={{12.1,9.52,2.66,2.06,1.63,1.48,1.29,1.25}};//提示文本，与values一一对应String[][] tooltips={{"1,210 million","952 million","266 million","206 million","163 million","148 million","129 million","125 million"}};//显示文本，与values一一对应String[][]texts={{"China","India","USA","Indonisia","Brazil","Russian","Pakistan","Japan"}};//每组数组的名称String[] names = {"Series A"};String result = impl.getPieChartData(chartTitle,chartDiv,legend,legendHorizontal,markers,ifLarge,ifMoveOut,values,tooltips,texts,names,font,fontColor);response.getWriter().write(result);}注意，以上每种类型的图表定义的参数都需要设置相应的值，然后调用各自的方法即可。