`
Java_大猫
  • 浏览: 173907 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

chart图之open flash chart2

    博客分类:
  • J2SE
阅读更多
刚在前一个文章里写了下关于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);// 写到客户端
分享到:
评论

相关推荐

    Open Flash Chart 教程

    Open Flash Chart 是一款开源的Flash图表库,它允许开发者通过简单的JavaScript API生成各种美观的、交互式的图表。这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表,适合Web...

    open flash chart api

    在Web开发中,数据可视化是至关重要的,Open Flash Chart API 提供了丰富的功能,使得开发者能够轻松创建各种类型的图表,如柱状图、饼图、线图、面积图等,以直观地展示数据。 API 的核心特性包括: 1. **多图表...

    open flash chart库

    - **多样化图表类型**:Open Flash Chart支持多种图表类型,如柱状图、折线图、饼图、散点图、雷达图等,满足不同场景的数据展示需求。 - **自定义元素**:开发者可以自由定制图表的各个部分,包括颜色、样式、标签...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...

    开源flash图表--open flash chart

    2. **丰富的图表类型**:Open Flash Chart支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、甘特图等,能满足各种数据分析和展示的需求。 3. **高度可定制**:开发者可以通过调整各种参数来改变图表的...

    open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart

    Open Flash Chart的强大之处在于其灵活性和可扩展性。开发者可以通过调整颜色、大小、样式、动画效果等众多参数,定制出符合自己需求的图表。同时,它支持多种数据源,包括XML、JSON等,可以轻松地与服务器端数据...

    完整的open flash chart 。

    3. **图表类型**:Open Flash Chart支持多种图表类型,包括折线图、柱状图、饼图、面积图、散点图、甘特图等。这些图表适用于展示各种类型的数据,如趋势分析、比较、分布等。 4. **数据源**:Open Flash Chart可以...

    open-flash-chart

    “工具”标签则暗示了Open Flash Chart是一个开发者工具,它简化了创建复杂图表的过程,提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等。用户可以通过简单的API调用来配置颜色、数据、标签等各种参数,...

    open-flash-chart2系列教程

    《Open Flash Chart 2 系列教程:深入解析与应用》 Open Flash Chart 2(简称OFC2)是一款强大的开源图表生成库,专为创建交互式、动态的Flash图表而设计。它允许开发者通过JSON格式的数据来构建各种类型的图表,如...

    open-flash-chart-1.9.6.zip_chart_flash chart_open_open flash cha

    "chart" 指的是图表功能,"flash_chart" 明确了它是基于Flash的图表库,"open" 和 "open_flash_chart" 强调其开源性质,而 "openflash_chart" 是项目名称的另一种拼写方式。 【压缩包子文件】: 1. "open-flash-...

    rails open_flash_chart

    "Rails Open Flash Chart" 是一个基于Ruby on Rails框架的库,用于在Web应用程序中生成交互式的Flash图表。这个库允许开发者轻松地创建各种统计图表,如折线图、柱状图、饼图等,以便更好地可视化数据。由于Flash在...

    open flash chart2实例

    Open Flash Chart 2是一款强大的开源图表库,它允许开发者创建各种动态、美观的图表,包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码,帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...

    Open Flash Chart例子、中文版PDF说明文档、参数表

    Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。  附带PDF说明文档,是中文版...

    Open Flash Chart 报表插件相关

    1. **多样的图表类型**:Open Flash Chart提供了各种图表类型,如柱状图、折线图、饼图、散点图、雷达图等,满足不同数据可视化需求。 2. **自定义丰富**:用户可以自由定制图表的颜色、大小、样式,甚至添加额外的...

    Open Flash Chart的应用(java),就是很炫的报表了

    这里面有两个java代码工程和 Open ...注:Open Flash Chart是根据传入的json数据的参数不同,来显示不同的chart图,非常的方便。只要学习下各种图形都包含哪些参数,把这些参数设置好,就能很容易的构建出一个图形。

    Open Flash Chart2 相关资料

    2.Open Flash Chart2非官方后续开发最新版本; 3.Open Flash Chart2 Java中所需的扩展Jofc2最新版本; 4.Open Flash Chart2的基础入门教程。 (压缩包中的jofc版本可能有点旧,有些部分功能没有,请下载最新的jofc) ...

    open flash chart 实例2

    在实际应用中,Open Flash Chart可以创建各种类型的图表,如折线图、柱状图、饼图、散点图等,还可以自定义图表的每一个细节,包括颜色、字体、背景、图例、标记、提示框等。此外,它还支持鼠标交互,如点击事件、...

    open flash chart 2 线性图 柱形图 饼状图

    线性图、柱形图和饼状图是数据可视化中常见的图表类型,Open Flash Chart 2 支持这些图表的创建,帮助开发者更直观地展示复杂的数据。 **线性图(Line Chart)** 线性图通常用于展示数据随时间变化的趋势。在Open ...

    open flash chart 2.0

    OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表; 该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash; 该组件还支持一些简单...

Global site tag (gtag.js) - Google Analytics