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

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

阅读量：5819 次

发布时间：2019-06-18

本文共 4139 字，大约阅读时间需要 13 分钟。

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

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

这样的功能在强调某个底线或分级时特别有感觉。比方，销售人员的销售底线，价格的红线等，在商业报表中表强调时应当非常实用。只是我在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
     
       chartLabels = new LinkedList
      
       ();	private List
       
         chartData = new LinkedList
        
         ();	private List
         
           mDesireLineDataSet = new LinkedList
          
           (); 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
           
             dataSeriesA= new LinkedList
            
             (); 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地址在""中有写.

MAIL: xcl_168@aliyun.com

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

你可能感兴趣的文章