chart图之open flash chart2

刚在前一个文章里写了下关于jfreechart 的一个小例子。这次是关于flash chart 的，开源中做的比较好的应该也就是open flash chart2 了 这里需要有一个jofc的 jar才可以
具体下载大家google下就OK了。我就不发地址了。
但是关于open flash chart2 设计到一个问题 在官方的DEMO里 你会发现 你可以做到隐藏显示。也就是 比如 A,B两种颜色，当你点击类别的时候可以隐藏所点击的。
但是在jofc里 无法设置这个，
jofc 导入到页面的全是JSON数据格式，而官方给出的JSON格式中 有一个ID的属性，但是你通过JOFC无法构建出这个ID的属性，所以你只能小小的扩展一下。
首先是柱状图
核心部分如下：

public class BarChartSetId extends BarChart{
	public BarChartSetId(){
		super(Style.NORMAL);
	}
	public BarChartSetId(Style style){
		super(style.getStyle());
	}
	private int id;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}
	
}

//其实构建柱状图的类是 BarChart 但是如果你想做隐藏显示，在这个类中无法构建 ID 这//个属性。所以只能做个小的扩展，当然更深的扩展我没有做。只是做个练习
BarChartSetId chart =  new BarChartSetId(Style.GLASS);
		BarChartSetId chart2 =  new BarChartSetId(Style.GLASS);
		
		long max = 900; // //Y 轴最大值
	
		XAxis x = new XAxis(); // X 轴
	
			x.addLabels("热");
			x.addLabels("电");
		//设置值
		List list2 = new ArrayList();
		list2.add("100");
		list2.add("200");
	
		
		List list3 = new ArrayList();
		list3.add("501");
		list3.add("202");
	
		
		for(int i=0;i<list2.size();i++){
			 Long tmp = Long.valueOf(list2.get(i).toString());
			Bar bar = new Bar(tmp, "用电");
			bar.setColour( "0x336699" ); // 颜色
			bar.setTooltip("整个层 "+tmp + " 用电 " ); // 鼠标移动上去后的提示
			chart.addBars(bar); // 条标题，显示在 x 轴上
		}
		
		for(int i=0;i<list3.size();i++){
			Long tmp = Long.valueOf(list3.get(i).toString());
			Bar bar = new Bar(tmp, "热度");
			bar.setColour( "#3334AD" ); // 颜色
			bar.setTooltip("整个层 "+tmp + " 热度 " ); // 鼠标移动上去后的提示
			chart2.addBars(bar); // 条标题，显示在 x 轴上
		}
		chart.setColour("0x336699");
		chart2.setColour("#3334AD");
		
		chart.setText("网通1");
		chart.setId(1);//这里的ID才是主要，随便设置你的值在页面用来区分。
		chart2.setText("铁通1");
		chart.setId(2);
		chart.setKey_on_click("toggle-visibility");
		chart2.setKey_on_click("toggle-visibility");
	
		    
		Chart flashChart = new Chart();
		flashChart.setTitle(new Text("电/热 | 2009/2010 | 整个层"));
		
		flashChart.addElements(chart); // 把柱图加入到图表  
		flashChart.addElements(chart2);
		
	  
		flashChart.setLegend(new Legend());
	
	
		YAxis y = new YAxis();  //y 轴  

		y.setMax(max+10.0); //y 轴最大值  

		y.setSteps(max/10*1.0); // 步进   
		flashChart.setYAxis(y);
		flashChart.setXAxis(x);
	
		String json = flashChart.toString();


		response.setContentType( "application/json-rpc;charset=utf-8" );

		response.setHeader( "Cache-Control" , "no-cache" );

		response.setHeader( "Expires" , "0" );

		response.setHeader( "Pragma" , "No-cache" );   

		response.getWriter().print(json);// 写到客户端

下面是折线图：

LineChartSetId lineChart = new LineChartSetId();

		lineChart.setFontSize(15);// 设置字体

		lineChart.setTooltip("#val#%");//设置鼠标移到点上显示的内容

		LineChart.Dot dot1 = new LineChart.Dot(70);//按照顺序设置各个点的值
		LineChart.Dot dot2 = new LineChart.Dot(85);
		LineChart.Dot dot3 = new LineChart.Dot(44);
		LineChart.Dot dot4 = new LineChart.Dot(67);
		LineChart.Dot dot5 = new LineChart.Dot(90);
		LineChart.Dot dot6 = new LineChart.Dot(64);
		LineChart.Dot dot7 = new LineChart.Dot(28);
		LineChart.Dot dot8 = new LineChart.Dot(99);


		lineChart.addDots(dot1);//按照顺序把点加入到图形中
		lineChart.addDots(dot2);
		lineChart.addDots(dot3);
		lineChart.addDots(dot4);
		lineChart.addDots(dot5);
		lineChart.addDots(dot6);
		lineChart.addDots(dot7);
		lineChart.addDots(dot8);
		lineChart.setColour("0x336699");
		
		LineChartSetId lineChart1 = new LineChartSetId();

		lineChart1.setFontSize(15);// 设置字体

		lineChart1.setTooltip("#val#%");//设置鼠标移到点上显示的内容

		LineChart.Dot dot11 = new LineChart.Dot(10);//按照顺序设置各个点的值
		LineChart.Dot dot12 = new LineChart.Dot(70);
		LineChart.Dot dot13 = new LineChart.Dot(55);
		LineChart.Dot dot14 = new LineChart.Dot(80);
		LineChart.Dot dot15 = new LineChart.Dot(20);
		LineChart.Dot dot16 = new LineChart.Dot(54);
		LineChart.Dot dot17 = new LineChart.Dot(88);
		LineChart.Dot dot18 = new LineChart.Dot(68);


		lineChart1.addDots(dot11);//按照顺序把点加入到图形中
		lineChart1.addDots(dot12);
		lineChart1.addDots(dot13);
		lineChart1.addDots(dot14);
		lineChart1.addDots(dot15);
		lineChart1.addDots(dot16);
		lineChart1.addDots(dot17);
		lineChart1.addDots(dot18);		
		lineChart1.setColour("#D54C78");
		
		lineChart1.setText("网通1");
	
		lineChart.setText("铁通1");
		
	
		lineChart1.setId(1);
	
		lineChart.setId(2);
		lineChart1.setKey_on_click("toggle-visibility");
		lineChart.setKey_on_click("toggle-visibility");
		
		
		
		
		XAxis x = new XAxis(); // X 轴

		x.addLabels("5月份");
		x.addLabels("6月份");
		x.addLabels("7月份");
		x.addLabels("8月份");
		x.addLabels("9月份");
		x.addLabels("10月份");
		x.addLabels("11月份");
		x.addLabels("12月份");

		//x.setColour("0x000000");


		long max = 100; // //Y 轴最大值

		YAxis y = new YAxis();  //y 轴  

		y.setMax(max+0.0); //y 轴最大值  

		y.setSteps(10); // 步进  



		Chart flashChart = new Chart( " 历年收费率报表 " , "font-size:12px;color:#ff0000;" ); // 整个图的标题 

		flashChart.setLegend(new Legend());
		flashChart.addElements(lineChart,lineChart1); // 把饼图加入到图表  

		Text yText = new Text("历年缴费率曲线图",Text.createStyle(20, "#736AFF", Text.TEXT_ALIGN_CENTER));

		flashChart.setYAxis(y); 

		flashChart.setXAxis(x);  

		flashChart.setYLegend(yText);//设置y轴显示内容
		
		String json = flashChart.toString();// 转成 json 格式

		response.setContentType( "application/json-rpc;charset=utf-8" );

		response.setHeader( "Cache-Control" , "no-cache" );

		response.setHeader( "Expires" , "0" );

		response.setHeader( "Pragma" , "No-cache" );   

		response.getWriter().print(json);// 写到客户端