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,布布扣