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

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

)

主要是加上这些小小的横线后，能非常明显的区分出数据的层次。通过柱形与线的对照，能够一下就知道，眼下处于什么层次或阶级。

这样的功能在强调某个底线或分级时特别有感觉。比方。销售人员的销售底线。价格的红线等，在商业报表中表强调时应当非常实用。只是我在Demo中是举了个考试成绩的柱形图。

虽不那么商业化。但应当能够比較让人好理解这个线的意义所在。

图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGNsMTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

附上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