XCL-Chart柱形图的期望线/分界线

     周日在柱形图上加了两个小功能，其中之一是加上了期望线/分界线,功能很小，但我个人很喜欢这个功能(好像之前也没看到别的图表库原生支持这个。)

主要是加上这些小小的横线后，能很明显的区分出数据的层次。通过柱形与线的对比，可以一下就知道，目前处于什么层次或阶级。

    这种功能在强调某个底线或分级时特别有感觉。比如，销售人员的销售底线，价格的红线等，在商业报表中表强调时应当很有用，不过我在Demo中是举了个考试成绩的柱形图。虽不那么商业化，但应当可以比较让人好理解这个线的意义所在。

    图如下:

   附上XCL-Charts实现此图的代码：

package com.demo.xclcharts.view;

import java.text.DecimalFormat;
import java.util.LinkedList;
import java.util.List;

import org.xclcharts.chart.BarChart;
import org.xclcharts.chart.BarData;
import org.xclcharts.chart.DesireLineData;
import org.xclcharts.common.IFormatterDoubleCallBack;
import org.xclcharts.common.IFormatterTextCallBack;
import org.xclcharts.renderer.XEnum;

import android.content.Context;
import android.graphics.Color;

public class BarChart03View extends GraphicalView {
	
	//标签轴
	private List<String> chartLabels = new LinkedList<String>();
	private List<BarData> chartData = new LinkedList<BarData>();
	private List<DesireLineData> mDesireLineDataSet = new LinkedList<DesireLineData>();
	
	public BarChart03View(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		chartLabels();
		chartDataSet();
		chartDesireLines();
		chartRender();
		
	}
	
	private void chartRender()
	{
		try {
			
			BarChart chart = new BarChart();
			//图所占范围大小
			chart.setChartRange(0.0f, 0.0f, getScreenWidth(),getScreenHeight());
			chart.setCanvas(this.mCacheCanvas);
			if(chart.isVerticalScreen())
			{
				chart.setPadding(15, 20, 8, 10);
			}else{
				chart.setPadding(20, 20, 10, 8);
			}
					
			//标题
			chart.setChartTitle("小小熊 - 期末考试成绩");
			chart.setChartSubTitle("(XCL-Charts Demo)");	
			//数据源
			chart.setDataSource(chartData);
			chart.setLabels(chartLabels);	
			chart.setDesireLines(mDesireLineDataSet);
			
			//图例
			chart.getLegend().setLeftLegend("分数");
			chart.getLegend().setLowerLegend("科目");
			
			//数据轴
			chart.getDataAxis().setAxisMax(100);
			chart.getDataAxis().setAxisMin(0);
			chart.getDataAxis().setAxisSteps(5);		
			//指隔多少个轴刻度(即细刻度)后为主刻度
			chart.getDataAxis().setDetailModeSteps(4);
			
			//背景网格
			chart.getPlotGrid().setHorizontalLinesVisible(true);
									
			//横向显示柱形,如想看横向显示效果，可打开这两行的注释即可
			//chart.setChartDirection(XEnum.Direction.HORIZONTAL);
			//chart.getPlotGrid().setVerticalLinesVisible(true);
			
			//定义数据轴标签显示格式
			chart.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);
				}
				
			});
			
			
			//在柱形顶部显示值
			chart.getBar().setItemLabelsVisible(true);
			//设定格式
			chart.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;
				}});
			
			//隐藏Key
			chart.setPlotKeyVisible(false);
			//绘制图
			chart.render();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	private void chartDataSet()
	{
		//标签对应的柱形数据集
		List<Double> dataSeriesA= new LinkedList<Double>();	
		dataSeriesA.add(98d); 
		dataSeriesA.add(100d); 
		dataSeriesA.add(95d); 
		dataSeriesA.add(100d); 
		BarData BarDataA = new BarData("",dataSeriesA,(int)Color.rgb(53, 169, 239));
		
		
		chartData.add(BarDataA);
	}
	
	private void chartLabels()
	{
		chartLabels.add("语文"); 
		chartLabels.add("数学"); 
		chartLabels.add("英语"); 
		chartLabels.add("计算机"); 
	}	
	
	/**
	 * 期望线/分界线
	 */
	private void chartDesireLines()
	{				
		mDesireLineDataSet.add(new DesireLineData("及格线",60d,(int)Color.RED,7));		
		mDesireLineDataSet.add(new DesireLineData("优秀",90d,(int)Color.rgb(35, 172, 57),5));		
	}
	
}

  从代码中可以看出，与例子中其它的柱形图不同，在设置数据源时，我多设置了一个数据源:

//数据源
			chart.setDataSource(chartData);
			chart.setLabels(chartLabels);	
			chart.setDesireLines(mDesireLineDataSet);

即除了数据轴与标签轴的数据源以外，还设置了期望线的数据源。 而期望线由四个参数构成。

mDesireLineDataSet.add(new DesireLineData("及格线",60d,(int)Color.RED,7));		
		mDesireLineDataSet.add(new DesireLineData("优秀",90d,(int)Color.rgb(35, 172, 57),5));

标 签 : 用于标识线的意义，为""则不显示

         值 :用来与数据轴的值进行对比，来确认显示位置

颜色 :线的颜色

线的粗细:可以在特别强调时，与颜色配合来让人醒目。

     这只是每条线各自的属性，实现上,通过"chart.getDesireLinePaint()",可以得到线的画笔类，在上面设置透明度等等效果。

关注的可以试一下这个小功能。

XCL-Charts地址在"写的Android图表库XCL-Charts，整理好现在开源了!!!"中有写.

MAIL: xcl_168@aliyun.com

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