Android实现价格走势自定义曲线图
本文是引用开源图表库框架 MPAndroidChart的LineChart
站在用户的角度思考问题,与客户深入沟通,找到抚顺网站设计与抚顺网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟空间、企业邮箱。业务覆盖抚顺地区。
地址:https://github.com/PhilJay/MPAndroidChart
1.需求:
(1)动态添加RadioButton,点击改变下面的LineChart数据
(2)LineChart绘制价格走势图,只显示最低点的小圆点和View,手指滑动,MarkView数据变化。
(3) 服务端返回端数据,不是每一天端数据,但是x轴显示的必须是每一天的数据,这里是有我自己处理过的。返回里需要显示点的数组,之前的时间点显示的就是第一个点值。
2.实现效果:
最低点显示View和小圆点是自定义的,通过修改 LineChart的源码,下面我们来具体分析代码
3.代码分析
(1)布局的xml
<?xml version="1.0" encoding="utf-8"?>
这里主要是添加以一个RadioGroup和一个LineChart
接下来是MainActivity.class
private void addViewForGroup(final Listlist) { for (int i = 0; i < list.size(); i++) { final RadioButton view = (RadioButton) LayoutInflater.from(MainActivity.this) .inflate(R.layout.item_gr_add_but_layout, mRadioGroup, false); view.setId(i); view.setText(list.get(i).getTitle()); if (i==0){ view.performClick(); radioGroupTextChange(list.get(0).getData(), list.get(0).getTitle()); mLineCharWidget = new LineChartWidget(MainActivity.this, list.get(0).getData(), mLineChart, setMinPrice(list.get(0).getData())); } mRadioGroup.addView(view); } mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { RadioButton button = (RadioButton) findViewById(checkedId); button.setText(list.get(checkedId).getTitle()); for (int i = 0; i < list.size(); i++) { if (button.getText().toString().equals(list.get(i).getTitle())) { radioGroupTextChange(list.get(i).getData(), list.get(i).getTitle()); if (mLineCharWidget == null) { mLineCharWidget = new LineChartWidget(MainActivity.this, list.get(i).getData(), mLineChart, setMinPrice(list.get(i).getData())); } else { mLineCharWidget.updateLineChar(list.get(i).getData(), setMinPrice(list.get(i).getData())); } } } } }); }
注意:这里的LineChartWidget是我自己封装的一个LineChart,包括LineChart初始化,数据的处理,已经手势的一些操作
简单的说一下思路,因为 Linechart的x,y都是自定义的,但是我这里只自定义的y轴,是把x隐藏起来的,x轴只显示最开始的点和结束的点,所以我这里有点投机,自己设置点两个textview来显示的
Linechart的点一设置都是统一所有点都设置的,但是需求上是得只在最低点显示,并还要绘制一个view先初始化 View,然后解析数据,
JsonData jsonDetail = new Gson().fromJson(jsonStr.toString(), new TypeToken() { }.getType()); if (jsonDetail.getHistorical_price() != null && jsonDetail.getHistorical_price().size() > 0) { setGroupLay(jsonDetail.getHistorical_price()); }
再根据解析的数据动态添加RadioButton
初始化LineChart
private void initLineChar() { Listdatalist = removeDuplicteData(mHistoricalPrice.getData_list()); //设置手势滑动事件 mLineChar.setOnChartGestureListener(this); //设置数值选择监听 mLineChar.setOnChartValueSelectedListener(this); //后台绘制 mLineChar.setDrawGridBackground(false); //设置描述文本 mLineChar.getDescription().setEnabled(false); mLineChar.setTouchEnabled(true); // 设置是否可以触摸 mLineChar.setDragEnabled(true);// 是否可以拖拽 mLineChar.setScaleXEnabled(true); //是否可以缩放 仅x轴 mLineChar.setScaleYEnabled(true); //是否可以缩放 仅y轴 mLineChar.setPinchZoom(true); //设置x轴和y轴能否同时缩放。默认是否 mLineChar.setDragDecelerationFrictionCoef(0.99f); mLineChar.getAxisRight().setEnabled(false); // 默认动画 mLineChar.animateX(2500); setMakeList(removeDuplicteData(datalist)); initMark(makeList, Long.valueOf(mHistoricalPrice.getStart_time())); initXAxis(datalist.size(), xAxisValuesStr); initYAxis(); initLegend(); setLineCharData(makeList); }
设置markView
private void setMakeList(Listdatalist) { try { SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date dBegin = format.parse(format.format(Long.valueOf(mHistoricalPrice.getStart_time()) * 1000)); Date dEnd = format.parse(format.format(Long.valueOf(mHistoricalPrice.getEnd_time()) * 1000)); float prices = 0; List listDate = getDatesBetweenTwoDate(dBegin, dEnd); if (datalist.size() >= listDate.size()) { makeList.clear(); makeList.addAll(datalist); } else { for (int i = 0; i < listDate.size(); i++) { JsonData.HistoricalPrice.HistoricalPriceData.DataList data = new JsonData.HistoricalPrice.HistoricalPriceData.DataList(); for (int j = 0; j < datalist.size(); j++) { if (TimeToString(DateToTimestamp(listDate.get(i))).equals(TimeToString(Long.valueOf(datalist.get(j).getPrice_drop_time())))) { data.setPrice_drop_time(datalist.get(j).getPrice_drop_time()); data.setPrice_new(datalist.get(j).getPrice_new()); prices = (datalist.get(j).getPrice_new()); } else { data.setPrice_drop_time(DateToTimestamp(listDate.get(i)) + ""); data.setPrice_new(prices); } } makeList.add(data); } } } catch (ParseException e) { e.printStackTrace(); } }
这里是设置LineChart里面的数据
private void setData(ArrayListvalues) { LineDataSet set1 = null; if (mLineChar.getData() != null && mLineChar.getData().getDataSetCount() > 0) { set1 = (LineDataSet) mLineChar.getData().getDataSetByIndex(0); set1.setValues(values); mLineChar.getData().notifyDataChanged(); mLineChar.notifyDataSetChanged(); } else { // 创建一个数据集,并给它一个类型 if (set1 == null) { set1 = new LineDataSet(values, "价格曲线图"); set1.setColor(Color.rgb(27, 198, 181)); set1.setCircleColor(Color.BLACK); set1.setLineWidth(1f); set1.setCircleRadius(3f); set1.setDrawCircleHole(false); set1.setValueTextSize(9f); set1.setDrawFilled(true); set1.setFormLineWidth(1f); set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f)); set1.setHighlightEnabled(true); //允许突出显示DataSet set1.setDrawHighlightIndicators(false); // 取消点击线上的点展示十字标识 set1.setDrawValues(true); // 不展示线上面点的值 //是否显示小圆点 set1.setDrawCircles(false); //修改源码 自定义的参数,可以显示最低点的View set1.setLowDrawCircles(true); set1.setCircleColors(Color.rgb(27, 198, 181));//27, 198, 181 //顶点设置值 set1.setDrawValues(false); set1.setFillColor(Color.rgb(203, 242, 238)); } //修改源码 自定义的参数,可以显示最低点的View set1.setLowNumbers(minData); ArrayList dataSets = new ArrayList (); //添加数据集 dataSets.add(set1); //创建一个数据集的数据对象 LineData data = new LineData(dataSets); //设置数据 mLineChar.setData(data); } }
这里是在源码里新加的地方
//修改源码 自定义的参数,可以显示最低点的View set1.setLowDrawCircles(true); set1.setLowNumbers(minData);
源码修改部分:
1.在LineDataSet添加2个参数,复写ILineDataSet新加的方法
//是否显示最低点的小圆点 private boolean mDrawLowCircle = false; //最低点对应的具体值 private float mLowNumbers = 100f;
2.在ILineDataSet接口中添加2个方法
boolean isLowDrawCirclesEnabled(); float getLowNumbers();
3.修改源码LineChartRenderer这个类的 drawValues(Canvas c)方法中,这里是设置最低点显示的View,这个方法中添加判断:
//设置最低点显示的自定义view if (dataSet.isLowDrawCirclesEnabled()) { if (entry.getY() == dataSet.getYMin()) { //设置在左边 if (x < 100) { locationcode = 1; } else { // 默认在右边 locationcode = 0; } appCustomDrawValue(c, dataSet.getValueFormatter(), entry.getY(), entry, i, x, y - valOffset, Color.WHITE); break; } } private int locationcode = 0; //设置最低点显示的text和text的背景框 private void appCustomDrawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color) { // Paint.FontMetrics fm = new Paint.FontMetrics(); mValuePaint.setColor(Color.rgb(27, 198, 181)); // mValuePaint.getFontMetrics(fm); y = (y + Utils.convertDpToPixel(30)); switch (locationcode) { case 0: RectF rectF = new RectF((x - Utils.convertDpToPixel(35)), (y - Utils.convertDpToPixel(23)), (x + Utils.convertDpToPixel(5)), y); c.drawRoundRect(rectF, 10, 10, mValuePaint); mValuePaint.setColor(color); c.drawText("¥" + formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x - Utils.convertDpToPixel(15), y - Utils.convertDpToPixel(10), mValuePaint); break; case 1: RectF rectF1 = new RectF(x + Utils.convertDpToPixel(5), (y - Utils.convertDpToPixel(23)), x + Utils.convertDpToPixel(45), y); c.drawRoundRect(rectF1, 10, 10, mValuePaint); mValuePaint.setColor(color); c.drawText("¥" + formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x + Utils.convertDpToPixel(27), y - Utils.convertDpToPixel(10), mValuePaint); break; } }
在drawCircles(Canvas c)方法中添加判断:则可以显示最低点的小圆点了。
//显示最低点的小圆点 if (dataSet.isLowDrawCirclesEnabled()) { if (e.getY() == dataSet.getYMin()) { Bitmap circleBitmap = imageCache.getBitmap(j); c.drawBitmap(circleBitmap, mCirclesBuffer[0] - circleRadius, mCirclesBuffer[1] - circleRadius, null); break; } }
好了,所有功能的关键部分已经讲完了。大家不懂的可以留言提问,或者自己下载源码看看:
github项目地址:https://github.com/Songyan992/LineChartStudy
源码下载地址:LineChartStudy_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网页标题:Android实现价格走势自定义曲线图
地址分享:http://pwwzsj.com/article/jephgi.html