绘制弧线比較图

   弧线比較图最早是偶然在 ExcelPro的图表博客 这里看到的。当时认为非常有意思图还能够这样摆，今天忽然翻到陈则编写的<<Excel能够这样用>>中又看到了这个图，

就冲动了下，花了一点时间把它加到我的开源图表库XCL-Charts中了。

先上上我放在Demo中的一个样例效果:

     效果自感还能够的，图本身没太多可说的，就贴一下我调用图表库的实现代码吧.

/**
 * Copyright 2014  XCL-Charts
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * 	
 * @Project XCL-Charts 
 * @Description Android图表基类库
 * @author XiongChuanLiang<br/>(xcl_168@aliyun.com)
 * @license http://www.apache.org/licenses/  Apache v2 License
 * @version 1.5
 */
package com.demo.xclcharts.view;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

import org.xclcharts.chart.ArcLineChart;
import org.xclcharts.chart.ArcLineData;
import org.xclcharts.renderer.XChart;
import org.xclcharts.renderer.XEnum;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.util.AttributeSet;
import android.util.Log;


/**
 * @ClassName ArcLineChart01View
 * @Description  弧线比較图的样例
 * @author XiongChuanLiang<br/>(xcl_168@aliyun.com)
 */
public class ArcLineChart01View extends TouchView {
	
	private String TAG = "ArcLineChart01View";
	private ArcLineChart chart = new ArcLineChart();	
	private LinkedList<ArcLineData> chartData = new LinkedList<ArcLineData>();

	public ArcLineChart01View(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		initView();
	}
	
	public ArcLineChart01View(Context context, AttributeSet attrs){   
        	super(context, attrs);   
        	initView();
	 }
	 
	 public ArcLineChart01View(Context context, AttributeSet attrs, int defStyle) {
			super(context, attrs, defStyle);
			initView();
	 }
	 
	 private void initView()
	 {
		 	chartDataSet();	
			chartRender();
	 }
	 	 	
	@Override  
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
        super.onSizeChanged(w, h, oldw, oldh);  
       //图所占范围大小
        chart.setChartRange(w,h);
    }  	
	
	
	private void chartRender()
	{
		try {					
			
			//设置画图区默认缩进px值
			int [] ltrb = getPieDefaultSpadding();
			chart.setPadding(ltrb[0], ltrb[1], ltrb[2], ltrb[3]);
			//背景
			chart.setApplyBackgroundColor(true);
			chart.setBackgroundColor(Color.WHITE);
			//边框
			chart.getBorder().getLinePaint().setColor(Color.rgb(83, 178, 50));
			chart.showRoundBorder();	
				
			//标题
			chart.setTitle("弧线比較图");
			chart.addSubtitle("(XCL-Charts Demo)");
			chart.setTitleVerticalAlign(XEnum.VerticalAlign.BOTTOM);				
			
			//显示图例
			chart.getPlotLegend().showLegend();
									
			//绑定数据源
			chart.setDataSource(chartData);
			
			//标签偏移
			chart.setLabelOffsetX(30f);
			//内环半径所占比例
			//chart.setInnerRadius(0.6f);		
			
			//设置附加信息
			addAttrInfo();
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			Log.e(TAG, e.toString());
		}
	}
	
	private void chartDataSet()
	{
		
		//设置图表数据源			
		chartData.add(new ArcLineData("closed","29% - closed" ,   (0.29*100),(int)Color.rgb(155, 187, 90)));
		chartData.add(new ArcLineData("inspect","53% - inspect" ,   (0.53*100),(int)Color.rgb(191, 79, 75)));
		chartData.add(new ArcLineData("open","76%" ,  (0.76*100),(int)Color.rgb(242, 167, 69)));
		chartData.add(new ArcLineData("workdone","86%" , (0.86*100),(int)Color.rgb(60, 173, 213)));
		chartData.add(new ArcLineData("dispute","36%" ,  (0.36*100),(int)Color.rgb(90, 79, 88)));	
	}
	
	private void addAttrInfo()
	{
		/////////////////////////////////////////////////////////////
		//设置附加信息
		Paint paintLib = new Paint();
		paintLib.setColor(Color.rgb(46, 164, 212)); 
		paintLib.setTextAlign(Align.CENTER);
		paintLib.setTextSize(30);		
		paintLib.setAntiAlias(true);
		chart.getPlotAttrInfo().addAttributeInfo(XEnum.Location.TOP, "圆弧式条形图", 0.1f, paintLib);			
		chart.getPlotAttrInfo().addAttributeInfo(XEnum.Location.BOTTOM, "XCL-Charts", 0.4f, paintLib);
			
		Paint paintSrc = new Paint();		
		paintSrc.setTextAlign(Align.CENTER);
		paintSrc.setTextSize(25);
		paintSrc.setAntiAlias(true);
		paintSrc.setColor((int)Color.rgb(41, 34, 102));
		chart.getPlotAttrInfo().addAttributeInfo(XEnum.Location.BOTTOM, 
								"ExcelPro", 0.2f, paintSrc);		
		/////////////////////////////////////////////////////////////
	}
	

	@Override
    public void render(Canvas canvas) {
        try{
            chart.render(canvas);
        } catch (Exception e){
        	Log.e(TAG, e.toString());
        }
    }

	@Override
	public List<XChart> bindChart() {
		// TODO Auto-generated method stub		
		List<XChart> lst = new ArrayList<XChart>();
		lst.add(chart);		
		return lst;
	}


}

    实现细节封装在库里，后面上传到github的的话，能够直接去看源代码实现，调用端就上面这几步，绑数据源，加显示在内环中的文字信息。 没啥好说的，用过图表库的一看就明确。

   好了就显摆一下实现，及说明一下来历。收工。

  MAIL: xcl_168@aliyun.com

 BLOG: blog.csdn.net/xcl168