码迷,mamicode.com
首页 > 其他好文 > 详细

XCL-Charts图表库中柱形图的同源风格切换介绍

时间:2014-06-16 21:01:12      阅读:732      评论:0      收藏:0      [点我收藏+]

标签:xcl-charts   android图表库   barchart   android charts   

         柱形图是被使用最多的图之一,在写XCL-Charts这个Android图表库时,为它花费的时间相当多,不是因为有多难绘制,而是要在设计时如何才能保证图基类能适应各种情况,能灵活满足足够多的需求,以及够简洁的接口,并要开放出足够多的绘制元素和参数供开发人员定制,同时对各类柱形图独有的的特点要加以突出,再加上柱形图的选项本身相对于其它图来说也是相当多的,所以花了比较多的时间。结果嘛,至少我自己暂时觉得还算不错。

     这里我只简单给大家介绍XCL-Charts图表库中柱图一个比较有意思的特点: 柱形图在使用同一数据源情况下,实现显示风格的灵活切换。


首先介绍下数据源:

     XCL-Charts柱形图的数据源我将其定义的相当简单,就三大元素: 

 键值,数据序列,柱形颜色 

BarData(String key,List<Double> dataSeries,Integer color) 


其次,看看实现风格切换:

我在图表库Demo中,举了下面这样一个例子, 对于传入的同一个数据源XCL-Charts支持在6种形式的柱形图风格间进行切换。   

  bubuko.com,布布扣

  经过封装,在XCL-Charts中实现这个效果代码在相当少的:

public class SpinnerBarChart01View extends GraphicalView {
	
	private int mChartStyle = 0;
	private int mMoveHeight = 0;
	private BarChart mChart = null;
	//标签轴
	private List<String> chartLables = new LinkedList<String>();
	private List<BarData> chartData = new LinkedList<BarData>();
	
	public SpinnerBarChart01View(Context context,int chartStyle,int moveHeight) {
		super(context);
		// TODO Auto-generated constructor stub
		
		mChartStyle = chartStyle;
		mMoveHeight = moveHeight;		
		chartLabels();
		chartDataSet();
		chartRender();
		
	}
	
	
	private void initChart(int chartStyle)
	{
		switch(chartStyle)
		{
		case 0: //竖向柱形图
			mChart = new BarChart();
			//图例
			mChart.getLegend().setLeftLegend("百分比");			
			break;
		case 1:	//横向柱形图
			mChart = new BarChart();
			mChart.setChartDirection(XEnum.Direction.HORIZONTAL);
			break;
		case 2:	//竖向3D柱形图
			mChart = new Bar3DChart();
			break;
		case 3:	//横向3D柱形图
			mChart = new Bar3DChart();
			mChart.setChartDirection(XEnum.Direction.HORIZONTAL);
			break;
		case 4:	//竖向堆叠柱形图 
			mChart = new StackBarChart();
			((StackBarChart) mChart).setTotalLabelVisible(false);
			break;
		case 5:	//横向堆叠柱形图
			mChart = new StackBarChart();
			mChart.setChartDirection(XEnum.Direction.HORIZONTAL);
			((StackBarChart) mChart).setTotalLabelVisible(false);
			break;			
		}
	}
	
	public void chartRender()
	{
		try {
			
			initChart(mChartStyle);
			
			//图所占范围大小
			mChart.setChartRange(0.0f, mMoveHeight, getScreenWidth(),getScreenHeight() - mMoveHeight);
			mChart.setCanvas(this.mCacheCanvas);
			if(mChart.isVerticalScreen())
			{
				mChart.setPadding(5, 40, 10, 15);
			}else{
				mChart.setPadding(10, 45, 15, 15);
			}
				
			//数据源
			mChart.setDataSource(chartData);
			mChart.setLabels(chartLables);	
									
			//数据轴
			mChart.getDataAxis().setAxisMax(100);
			mChart.getDataAxis().setAxisMin(0);
			mChart.getDataAxis().setAxisSteps(20);
			
			//定义数据轴标签显示格式
			mChart.getDataAxis().setLabelFormatter(new IFormatterTextCallBack(){
	
				@Override
				public String textFormatter(String value) {
					// TODO Auto-generated method stub		
					Double tmp = Double.parseDouble(value);
					DecimalFormat df = new DecimalFormat("#0");
					String label = df.format(tmp).toString();				
					return label+"%";
				}
				
			});		
			//定义柱形上标签显示格式
			mChart.getBar().setItemLabelsVisible(true);
			mChart.getBar().getItemLabelsPaint().setColor((int)Color.rgb(72, 61, 139)); 
			mChart.getBar().getItemLabelsPaint().setFakeBoldText(true);
			
			mChart.setItemLabelFormatter(new IFormatterDoubleCallBack() {
				@Override
				public String doubleFormatter(Double value) {
					// TODO Auto-generated method stub										
					DecimalFormat df=new DecimalFormat("#0");
					String label = df.format(value).toString();				
					return label+"%";
				}});	       
			//绘制图表					
			mChart.render();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			Log.e("ERROR", e.toString());
		}
	}
	private void chartDataSet()
	{
		//标签对应的柱形数据集
		List<Double> dataSeriesA= new LinkedList<Double>();	
		dataSeriesA.add(50d); 
		dataSeriesA.add(25d);
		dataSeriesA.add(20d);
		BarData BarDataA = new BarData("Google",dataSeriesA,(int)Color.rgb(73, 135, 218));
				
		List<Double> dataSeriesB= new LinkedList<Double>();	
		dataSeriesB.add(35d); 		
		dataSeriesB.add(65d);
		dataSeriesB.add(75d);
		BarData BarDataB = new BarData("Baidu",dataSeriesB,(int)Color.rgb(224, 4, 0));
		
		List<Double> dataSeriesC= new LinkedList<Double>();	
		dataSeriesC.add(15d);
		dataSeriesC.add(10d);
		dataSeriesC.add(5d);
		BarData BarDataC = new BarData("Bing",dataSeriesC,(int)Color.rgb(255, 185, 0));
		
		chartData.add(BarDataA);
		chartData.add(BarDataB);
		chartData.add(BarDataC);
	}
	
	private void chartLabels()
	{
		chartLables.add("路人甲"); 
		chartLables.add("路人乙"); 
		chartLables.add("路人丙"); 
	}	
		
	
}

     6种图各有各的特点,但在上面代码却可以看到,在XCL-Charts中使用柱形图是件非常简单的事,甚至有没这种感觉,传入数据轴和标签轴数据源的代码,比设置绘图属性的代码更多? 当然代码少不代表效果阳春白雪。

     效果图如下:

    bubuko.com,布布扣 bubuko.com,布布扣 bubuko.com,布布扣 

    bubuko.com,布布扣 bubuko.com,布布扣 bubuko.com,布布扣

        上面这些图只是用最简单的方式展示了下柱形图风格的切换,这个例子并没有展示XCL-Charts灵活的定制性。而图表库在设计时,

花时间最多的就是在其定制性上,因为我认为图表库主要就是封装绘制图表时其本身的位置计算,逻辑处理等具体过程,而其它一切

参数与绘制元素都应当是可供定制的。所以XCL-Charts中绘图相关的各个元素和参数,几乎都开放出来供用户定制,在这就不细说了。

         当然如果你留意下例子中的代码,也可以看出一部份特点来. 我把图中相关元素分别单立封装成了一个个类,如轴分为数据轴和标签轴,

用于管理轴各自相关的一切属性。而柱形则归于bar这个类去处理。 而对于标签文字的显示等,则采用回调函数的方式开放出来,让用户自定义格式,

当然,不实现回调也没关系,会按默认的显示风格显示。 

        不过我也不是蛮干,啥都自己定义,在有些地方可以看到,我开放了Canvas的Paint画笔对象出来,这样用户可以直接操控Android本身的画笔对象类,利用Android自己的函数和属性来定制效果,即够灵活,我也省事。嘿嘿.

这个例子中显露的也只是一点点功能而已,远不止这点功能。感兴趣的可以自己去下代码,看下我写的Demo。

       另外再提一句,XCL-Charts是利用Android Canvas相关的函数来绘制图表,相比于调用Web的各类js图表库来说,是具有原生优势的。如果有

图表需求的,可以来尝试尝试。

       XCL-Charts是开源的,基于Apache v2 License开源协议

        开源中国收录的项目地址:
         http://www.oschina.net/p/xcl-charts

       代码分别托管在开源中国和GitHub上:
    开源中国上的代码托管地址:
           https://git.oschina.net/xclcharts/XCL-Charts

        GitHub上的代码托管地址:
           https://github.com/xcltapestry/XCL-Charts

        对这个库感兴趣的可以关注下。

 

       还有就是我前几天才发布的这个图表库,只在CSDN自己博客发了篇通知和EOE论坛上发了个,没想到关注的人蛮多的,还有网友留言支持。真没想到,在这谢谢了。

       个人认为,Android图表其实是个很小众的功能需求,当时折腾只是纯兴趣。如果有留意我前段时间的博文就知道,当时其实只是学Canvas时觉得好玩,尝试实现了下在上面绘制各种图,没想到折腾出来的这东东整理整理还算有点用。

       特别是要谢谢开源中国,其代码托管速度蛮快的,另外收录的也很快,我看了下,在"Android UI 组件"类别下的第4页就能找到了,在https://git.oschina.net/explore也上了推荐。

    当然目前要完善的东东还有很多, 总之有人关注就有了继续弄的动力,哈哈。


       MAIL: xcl_168@aliyun.com

       Blog:http://blog.csdn.net/xcl168


      


XCL-Charts图表库中柱形图的同源风格切换介绍,布布扣,bubuko.com

XCL-Charts图表库中柱形图的同源风格切换介绍

标签:xcl-charts   android图表库   barchart   android charts   

原文地址:http://blog.csdn.net/xcl168/article/details/31023423

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!