周日在柱形图上加了两个小功能,其中之一是加上了期望线/分界线,功能很小,但我个人很喜欢这个功能(好像之前也没看到别的图表库原生支持这个。)
主要是加上这些小小的横线后,能很明显的区分出数据的层次。通过柱形与线的对比,可以一下就知道,目前处于什么层次或阶级。
这种功能在强调某个底线或分级时特别有感觉。比如,销售人员的销售底线,价格的红线等,在商业报表中表强调时应当很有用,不过我在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
XCL-Chart柱形图的期望线/分界线,布布扣,bubuko.com
原文:http://blog.csdn.net/xcl168/article/details/31461475