1. 功能

    实现各种统计图表,用于统计报表,预警分析等的效果展现,如常用的饼图,柱状图、趋势图等。

  2. 参数

    参数名 参数类型 是否必须 默认值 描述
    name java.lang.String 元素 id 和 name 属性的值
    pageName java.lang.String 展现图表的页面路径
    listener java.lang.String 展现图表的页面方法
    source java.lang.Object 将指定的数据源传给统计图表
    columns java.lang.Object 指定 source 中过滤 key 值,如:columns="key1,key2,key3",当 source 为数组形式时,columns 也为数组
    params java.lang.String 展现图表的页面所需参数,如:params="a=b&c=d"
    width int 100% 展现图表的宽度
    height int 展现图表的高度,height 只是设置图片展现高度,图表本身的高度需要在生成图表时设置,所以在定义该组件的高度时最好保持和图表生成时设置的高度一致
  3. 注意事项

    1. 统计图表的展示类型是由指定的 pageName 和 listener 来决定,分为饼状图、环状图、条形图、柱状图、多曲线趋势图、累积条形图、累积柱状图、区划图、柱状曲线结合图。

    2. height 只是设置图片展现高度,图表本身的高度需要在生成图表时设置,所以在定义该组件的高度时最好保持和图表生成时设置的高度一致。

    3. 统计的数据分为单纬度和多维度,数据格式尤其是多维度数据必须规范,否则会导致页面异常。如:

    private IDataset getMutiDataset(){
    	IDataset dataset = new DatasetList();
    	KeyValue kv1 = new KeyValue("一季度", "湖北",400);
    	KeyValue kv2 = new KeyValue("一季度", "湖南",600);
    	KeyValue kv3 = new KeyValue("一季度", "河南",900);
    
    	KeyValue kv4 = new KeyValue("二季度", "湖北",800);
    	KeyValue kv5 = new KeyValue("二季度", "湖南",1050);
    	//数据错误,缺少“二季度”“河南”统计
    	
    	dataset.add(kv1);dataset.add(kv2);
    	dataset.add(kv3);dataset.add(kv4);
    	dataset.add(kv5);
    	
    	return dataset;
    }
    

    4. 局部刷新统计

    <script language="javascript">
    //<!--
    function freshChart(){
    	ajaxSubmit('QueryCond','queryCust','custId=1','chartPart');
    }
    //-->
    </script>
    <button onclick="freshChart()" class="e_button-form" type="button"><span>刷新统计</span></button>
    <div jwcid="chartPart@Part" id="chartPart" element="div" >
    	<img jwcid="@Chart" name="chart5" pageName="CustDemo" listener="getColumnLineChart" width="500" height="300" /> 
    </div>
    
  4. 示例

    1. HTML 代码

      <img jwcid="@Chart"
      	name="charttest" 
      	pageName="CustList" 
      	listener="getLineChart" 
      	params="a=b&c=d" 
      	width="500" 
      	height="300"
      />
      
    2. Java 代码

      public abstract class FlashCharts extends BasePage {
      
      	/* 饼状图 */
      	public void getPieChart(IRequestCycle cycle) throws Exception {
      		PieChart c = new PieChart();
      		c.setHeight(300);//设置高度,建议与组件设置相同
      		c.setWidth(500);//设置宽度,建议与组件设置相同
      		c.setTitle("饼状图");//设置标题
      		//c.setChart3D(false);
      
      		//数据集
      		IDataset dataset = getDataset();
      		ChartManager.createPieChart(cycle, c, dataset);
      
      	}
      	/* 环状图 */
      	public void getDoughnutChart(IRequestCycle cycle) throws Exception {
      		DoughnutChart c = new DoughnutChart();
      		c.setHeight(300);//设置高度,建议与组件设置相同
      		c.setWidth(500);//设置宽度,建议与组件设置相同
      		c.setTitle("环状图");//设置标题
      		//c.setChart3D(false);
      
      		//数据集
      		IDataset dataset = getDataset();
      
      		ChartManager.createDoughnutChart(cycle, c, dataset);
      
      	}
      	/* 区域图 */
      	public void getAreaChart(IRequestCycle cycle) throws Exception {
      		
      		AreaChart chart = new AreaChart();
      		chart.setTitle("区域图"); //设置标题
      		chart.setHorizontalTitle("月份"); 
      		chart.setVerticalTitle("产量"); 
      		chart.setWidth(500);//设置宽度,建议与组件设置相同
      		chart.setHeight(300);//设置高度,建议与组件设置相同
      
      		//数据集
      		IDataset dataset = getDataset();
      		
      		ChartManager.createAreaChart(cycle, chart, dataset);
      	}
      	/* 条形图 */
      	public void getBarChart(IRequestCycle cycle) throws Exception {
      		
      		BarChart barchart = new BarChart();
      		barchart.setTitle("条形图"); //设置标题
      		barchart.setHorizontalTitle("省市"); 
      		barchart.setVerticalTitle("产量"); 
      		barchart.setWidth(500);//设置宽度,建议与组件设置相同
      		barchart.setHeight(300);//设置高度,建议与组件设置相同
      		barchart.setChart3D(true);
      
      		//数据集
      		IDataset dataset = getDataset();
      		
      		ChartManager.createBarChart(cycle, barchart, dataset);
      	}
      	/* 柱状图 */
      	public void getColumnChart(IRequestCycle cycle) throws Exception {
      		
      		ColumnChart barchart = new ColumnChart();
      		barchart.setTitle("柱状图"); //设置标题
      		barchart.setHorizontalTitle("水果"); //设置横向标题
      		barchart.setVerticalTitle("产量"); //设置纵向标题
      		barchart.setWidth(500);//设置宽度,建议与组件设置相同
      		barchart.setHeight(300);//设置高度,建议与组件设置相同
      		//barchart.setChart3D(false);
      		
      		//数据集
      		IDataset dataset = getMutiDataset();
      		
      		ChartManager.createColumnChart(cycle, barchart,dataset);
      	}
      	/* 多曲线趋势图 */
      	public void getLineChart(IRequestCycle cycle) throws Exception {
      		
      		//组件传递参数
      		IData params = getData();
      		System.out.println(params);
      		LineChart lc = new LineChart();
      		lc.setHeight(300);//设置高度,建议与组件设置相同
      		lc.setWidth(500);//设置宽度,建议与组件设置相同
      		lc.setTitle("多曲线趋势图");//设置标题
      		lc.setHorizontalTitle("季度");//设置横向标题
      		lc.setVerticalTitle("GDP");//设置纵向标题
      		
      		IDataset dataset =  getMutiDataset();
      
      		ChartManager.createLineChart(cycle, lc, dataset);
      	}
      	/* 累积条形图 */
      	public void getStackedBarChart(IRequestCycle cycle)throws Exception{
      		
      		StackedBarChart lc = new StackedBarChart();
      		lc.setHeight(300);//设置高度,建议与组件设置相同
      		lc.setWidth(500);//设置宽度,建议与组件设置相同
      		lc.setTitle("累积条形图");//设置标题
      		lc.setHorizontalTitle("Season");//设置横向标题
      		lc.setVerticalTitle("GDP");//设置纵向标题
      		
      		IDataset dataset =  getMutiDataset();
      		
      		ChartManager.createStackedBarChart(cycle, lc, dataset);
      	}
      	
      	/* 累积柱状图 */
      	public void getStackedColumnChart(IRequestCycle cycle)throws Exception{
      		
      		StackedColumnChart lc = new StackedColumnChart();
      		lc.setHeight(300);//设置高度,建议与组件设置相同
      		lc.setWidth(500);//设置宽度,建议与组件设置相同
      		lc.setTitle("累积柱状图");//设置标题
      		lc.setHorizontalTitle("季度");//设置横向标题
      		lc.setVerticalTitle("GDP");//设置纵向标题
      		//lc.setChart3D(false);
      		
      		IDataset dataset = getMutiDataset();
      		
      		ChartManager.createStackedColumnChart(cycle, lc, dataset);
      	}
      
      	/* 柱状曲线结合图 */
      	public void getColumnLineChart(IRequestCycle cycle)throws Exception{
      		
      		ColumnLineChart lc = new ColumnLineChart();
      		lc.setHeight(300);//设置高度,建议与组件设置相同
      		lc.setWidth(600);//设置宽度,建议与组件设置相同
      		lc.setTitle("柱状曲线结合图");//设置标题
      		lc.setHorizontalTitle("季度");//设置横向标题
      		lc.setVerticalTitle("GDP");//设置纵向标题
      		//lc.setChart3D(false);
      		
      		IDataset dataset = getMutiDataset();
      		
      		ChartManager.createColumnLineChart(cycle, lc, dataset);
      	}
      	/* 单纬度数据 */
      	private IDataset getDataset(){
      		IDataset dataset = new DatasetList();
      		KeyValue kv1 = new KeyValue("湖北",400);
      		KeyValue kv2 = new KeyValue("湖南",600);
      		KeyValue kv3 = new KeyValue("河南",900);
      		KeyValue kv4 = new KeyValue("河北",700);
      		KeyValue kv5 = new KeyValue("山东",800);
      		KeyValue kv6 = new KeyValue("山西",1050);
      		KeyValue kv7 = new KeyValue("广东",900);
      		KeyValue kv8 = new KeyValue("广西",700);
      		
      		dataset.add(kv1);dataset.add(kv2);
      		dataset.add(kv3);dataset.add(kv4);
      		dataset.add(kv5);dataset.add(kv6);
      		dataset.add(kv7);dataset.add(kv8);
      
      		return dataset;
      	}
      	/* 多纬度数据 */
      	private IDataset getMutiDataset(){
      		IDataset dataset = new DatasetList();
      		KeyValue kv1 = new KeyValue("一季度", "湖北",400);
      		KeyValue kv2 = new KeyValue("一季度", "湖南",600);
      		KeyValue kv3 = new KeyValue("一季度", "河南",900);
      		KeyValue kv4 = new KeyValue("一季度", "河北",700);
      		KeyValue kv5 = new KeyValue("二季度", "湖北",800);
      		KeyValue kv6 = new KeyValue("二季度", "湖南",1050);
      		KeyValue kv7 = new KeyValue("二季度", "河南",900);
      		KeyValue kv8 = new KeyValue("二季度", "河北",700);
      		KeyValue kv9 = new KeyValue("三季度", "湖北",900);
      		KeyValue kv10 = new KeyValue("三季度", "河南",1500);
      		KeyValue kv11 = new KeyValue("三季度", "河北",1200);
      		KeyValue kv12 = new KeyValue("三季度", "湖南",1000);
      		KeyValue kv13 = new KeyValue("四季度", "湖北",600);
      		KeyValue kv14 = new KeyValue("四季度", "湖南",700);
      		KeyValue kv15 = new KeyValue("四季度", "河北",1300);
      		KeyValue kv16 = new KeyValue("四季度", "河南",1000);
      		
      		dataset.add(kv1);dataset.add(kv2);
      		dataset.add(kv3);dataset.add(kv4);
      		dataset.add(kv5);dataset.add(kv6);
      		dataset.add(kv7);dataset.add(kv8);
      		dataset.add(kv9);dataset.add(kv10); 
      		dataset.add(kv11);dataset.add(kv12);
      		dataset.add(kv13);dataset.add(kv14);
      		dataset.add(kv15);dataset.add(kv16);
      		
      		return dataset;
      	}
      }