设为首页 加入收藏

TOP

用XCL-Charts定制多柱形堆积图(一)
2015-07-20 18:08:03 来源: 作者: 【 】 浏览:61
Tags:XCL-Charts 定制 堆积

有网友发了张图,问我实现的方法。 与一般的柱形图不一样,这张图很特别,相信他要找到现成的,对得上号的图表将不是件易事。

通常图表库实现的不是通常意义上的柱形图,就是单纯的堆积图,很少有这种混在一起展现的情况出现。没得法,要定制才能实现的了。

网友的原图(应当没侵权吧)

\

利用XCL-Charts实现的效果图:

\

网友的这张表面看起来,是同一个标签,两个堆积柱形并排放在一起,但依我的经验,要原汁原味让图表库提供这种图是很难的,

参数及数据位置计算很难处理。只能利用现有图表,采用混合方式实现。仔细观察了下,发现实际上只要将两个柱形图并在一起,在柱形高

度上做点手脚就能达到这个效果了。

即,先画高一点那一些柱形图,再绘数据低一层的柱形图。 当然如果数据是变化的,现在高的到时有可能变低,就不能采用这种方法了,

但这张图暂不用考虑这个问题。

定制程序的部份代码如下:

	private String TAG = "MultiBarchart201View";
	private BarChart chart = new BarChart();
	private BarChart chart2 = new BarChart();
	
	//标签轴
	private List
  
    chartLabels = new LinkedList
   
    (); private List
    
      chartData = new LinkedList
     
      (); private List
      
        chartData2 = new LinkedList
       
        (); private int axisColor = Color.rgb(125, 223, 252); public MultiBarChart01View(Context context) { super(context); // TODO Auto-generated constructor stub initView(); } public MultiBarChart01View(Context context, AttributeSet attrs){ super(context, attrs); initView(); } public MultiBarChart01View(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initView(); } private void initView() { chartLabels(); chartDataSet(); chartDataSet2(); chartRender(); chartRender2(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //图所占范围大小 chart.setChartRange(w,h); chart2.setChartRange(w,h); } private void chartRender() { try { //设置绘图区默认缩进px值,留置空间显示Axis,Axistitle.... int [] ltrb = getBarLnDefaultSpadding(); chart.setPadding(ltrb[0], ltrb[1], DensityUtil.dip2px(getContext(), 45), ltrb[3]); //数据源 chart.setDataSource(chartData); chart.setCategories(chartLabels); //数据轴 chart.getDataAxis().setAxisMax(2500); chart.getDataAxis().setAxisMin(0); chart.getDataAxis().setAxisSteps(500); //让柱子间没空白 chart.getBar().setBarInnerMargin(0d); //隐藏轴 chart.getDataAxis().setVisible(false); chart.getCategoryAxis().setVisible(false); //将Bar风格设为Fill chart.getBar().setBarStyle(XEnum.BarStyle.FILL); chart.setApplyBackgroundColor(true); chart.setBackgroundColor(Color.rgb(19, 163, 224)); } catch (Exception e) { // TODO Auto-generated catch block Log.e(TAG, e.toString()); } } private void chartRender2() { try { //设置绘图区默认缩进px值,留置空间显示Axis,Axistitle.... int [] ltrb = getBarLnDefaultSpadding(); chart2.setPadding(ltrb[0], ltrb[1], DensityUtil.dip2px(getContext(), 45), ltrb[3]); //显示边框 //chart2.showRoundBorder(); chart2.getBar().setBarStyle(XEnum.BarStyle.FILL); //标题 chart2.setTitle("负债率标准备: 40%~60%"); chart2.addSubtitle("(XCL-Charts Demo)"); chart2.getPlotTitle().getTitlePaint().setColor(axisColor); chart2.getPlotTitle().getSubtitlePaint().setColor(axisColor); //数据源 chart2.setDataSource(chartData2); chart2.setCategories(chartLabels); //轴标题 chart2.getAxisTitle().setLeftAxisTitle("金额"); chart2.getAxisTitle().setLowerAxisTitle("资产负债率"); //数据轴 chart2.getDataAxis().setAxisMax(2500); chart2.getDataAxis().setAxisMin(0); chart2.getDataAxis().setAxisSteps(500); //定义数据轴标签显示格式 chart2.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); } }
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇[ACM] POJ 1218 THE DRUNK JAILER.. 下一篇[ACM] POJ 1328 Radar Installati..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: