android MPChart图标使用详解

52 篇文章 0 订阅
3 篇文章 0 订阅

  最近项目里有要添加更加复杂的图标了,以前一些简单的曲线图,饼状图,风险指示图等,都是自己画,随着难度的增加,越来越力不从心,以前研究过achartenginee图标框架,但发现achartenginee的可定制性实在不敢恭维,做出来的图标根本不能满足需求,所以又在github上搜索android chart,发现了排第一的这款图标框架,大概估计了一下,是符合自己的要求的,于是down下来,研究研究,确实要比其他已知的框架强大。特此,总结一下其用法。

   MPChart框架的优点:1.简单易用,所有的图标都可以当做一个普通的View在我们的布局文件中定义,与在布局中定义一个TextView没有任何的区别,使用也基本一样,通过fandViewById()即可,然后向chart中添加数据即可。

                                           2.完善的事件冲突处理,在使用achartenginee时,发现图表一旦放在ScrollView中,则会产生事件冲突,导致ScrollView滑动不灵敏,而MPChart在事件处理上堪称完美,不仅在ScrollView中不会引起任何事件冲突,而且图表还可以夸张的放在LIstView,ViewPager中。不要太强大啊。

                                           3.强大的可定制性,只要是你能看到的,就可以修改为你想要的样式,这一点是我选择它的主要优点。

                                           4.一句话就可实现的动画效果,但有点小bug.但作者还在不停的更新。

   基于以上几点,我们基本可以抱起其他的图表框架而一心使用MPChart即可,下面先看一下源码demo的效果图,以及我自己定制的一个曲线图:

  

                               


                            

    效果简直不谈啊,太强大了,必须学会使用啊。

    下面讲一下我对其代码结构的理解:

    1.源码charts包中定义了所有可以绘制的图标类型,包括曲线图,饼状图,柱状图,散点图,以及混合图。chart主要处理图表的交互事件,动画,组件的绘制等。

    2.源码components包中定义了图表中所有的组件,包括x轴(XAxis),y轴(YAxis),表头(Lenged),标识(MarkerView).

    3.源码data包中则是不同类型的图表需要不同的数据类型。

    4.源码listener包中定义了所有的事件类型。

     这几个包是我们需要知道的,通过chart包中的任意一个实例,可以进行我们需要的任何定制。例如:想要定制X轴的数据或者样式,

     XAxis xAxis = mChart.getXAxis();

     xAxis.setPosition(); //定制X轴是在图表上方还是下方。

     xAxis.setLabelsToSkip(); //定制X轴Label间隔。

     xAxis.setAvoidFirstLastClipping(); //定制X轴起点和终点Label不能超出屏幕。

     Y轴的操作类似。

     Lenged l = mChart.getLenged();

     l.setEnabled(); //定制表头是否显示。

     l.setForm();  //定制表头样式,是circle,square,还是line

     等等,只要是你能看到的样式,都可以定制,你没看到的也可以定制。下面列贴出第一个我定制的图的源码:

                lineView = new LineChart(this);
		lineView.setDescription("");
		lineView.setScaleEnabled(false);
		lineView.getAxisRight().setEnabled(true);
		lineView.setDrawGridBackground(false);
		lineView.setTouchEnabled(false); //设置图表滑动是否可用
		lineView.getLegend().setEnabled(false); //设置表头不可用
		lineView.setHardwareAccelerationEnabled(true);

		ArrayList<Entry> yRawData = new ArrayList<Entry>();
		ArrayList<String> xRawDatas = new ArrayList<String>();
		int index = 0;
		for (int i = array.length() - 1; i >= 0; i--)
		{
			if (array.get(i) != null)
			{
				JSONObject jsonObj = (JSONObject) array.get(i);
				yRawData.add(new Entry(Float.parseFloat(jsonObj.optString("profitRate")), index));
				xRawDatas.add(DateFormatHelp.formatDateToNeededFormat(jsonObj.optString("dt").concat("000"),
						DateFormat.DATE_1));
				index++;
				initMaxMin(Float.parseFloat(jsonObj.optString("profitRate")));
			}
		}
		/**
		 * x轴样式设置
		 */
		XAxis xAxis = lineView.getXAxis();
		xAxis.setPosition(XAxisPosition.BOTTOM);// 设置x轴在底部显示
		xAxis.setAvoidFirstLastClipping(true);
		xAxis.setSpaceBetweenLabels(0); // x轴间距
		xAxis.setTextColor(resource.getColor(R.color.grey_low_txt));
		xAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));
		xAxis.setDrawGridLines(true);//设置是否显示横轴表格
		xAxis.setGridColor(resource.getColor(R.color.color_dddddd));//设置x轴表格颜色
		/**
		 * y轴样式设置
		 */
		YAxis leftAxis = lineView.getAxisLeft();
		leftAxis.setStartAtZero(false);
		leftAxis.setLabelCount(yAxislabelNum, true);  //设置Y轴Label数量
		leftAxis.setDrawLimitLinesBehindData(true);   
		leftAxis.setTextColor(resource.getColor(R.color.grey_low_txt)); //设置左侧Y轴Label颜色
		leftAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd)); //设置左侧Y轴颜色

		leftAxis.setDrawGridLines(true); //设置显示Y轴表格线
		leftAxis.setGridColor(resource.getColor(R.color.color_dddddd)); //设置Y轴表格线颜色
		leftAxis.setAxisMaxValue(yAxisMax + yAxisGap); // 设置Y轴最大值
		leftAxis.setAxisMinValue(yAxisMin - yAxisGap);// 设置Y轴最小值

		YAxis rightAxis = lineView.getAxisRight();
		rightAxis.setDrawLabels(false);   //设置右侧Y轴是否显示 Label
		rightAxis.setDrawGridLines(false);
		rightAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));
		/**
		 * 曲线样式设置
		 */
		LineDataSet set = new LineDataSet(yRawData, "");
		set.setDrawCubic(true);  //设置曲线样式为cubie
		set.setCubicIntensity(0.2f);//置曲线顺滑度
		set.setLineWidth(Util.dip2px(this, 1.0f)); //射置曲线width
		set.setColor(resource.getColor(R.color.color_fd4634));//射置曲线颜色
		set.setCircleSize(Util.dip2px(this, 2.0f));//射置曲线上圆点大小
		set.setCircleColor(resource.getColor(R.color.color_fd4634));//射置曲线上圆点颜色
		set.setFillColor(resource.getColor(R.color.color_fd4634));//射置曲线填充颜色
		set.setFillAlpha(128);//射置曲线填充颜色透明度
		set.setDrawFilled(true);//设置曲线填冲是否启用
		set.setDrawValues(false);//设置是否显示点值
		LineData data = new LineData(xRawDatas, set);
		lineView.setData(data);//绑定数据到图表
		lineView.invalidate();

		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, Util.dip2px(this, 150));
		contentLayout.addView(lineView, params);



  学会使用这个图表框架后,效率可以大大的提高,普通的图表需求也不用在担心了。。。

 

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值