本文是引用開源圖表庫框架 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"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RadioGroup android:id="@+id/mRadioGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30px" android:orientation="horizontal" android:visibility="gone"> </RadioGroup> <LinearLayout android:layout_width="match_parent" android:layout_height="200dp" android:orientation="vertical"> <com.github.mikephil.charting.charts.LineChart android:id="@+id/mLineChart" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/detailMinTimeTv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="50px" android:layout_weight="1" android:textColor="#B5B5B5" android:textSize="24px" /> <TextView android:id="@+id/detailMaxTimeTv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="30px" android:layout_weight="1" android:gravity="right" android:textColor="#B5B5B5" android:textSize="24px" /> </LinearLayout> </LinearLayout></LinearLayout>
這里主要是添加以一個RadioGroup和一個LineChart
接下來是MainActivity.class
private void addViewForGroup(final List<JsonData.HistoricalPrice> list) { 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<JsonData>() { }.getType()); if (jsonDetail.getHistorical_price() != null && jsonDetail.getHistorical_price().size() > 0) { setGroupLay(jsonDetail.getHistorical_price()); }再根據解析的數據動態添加RadioButton
初始化LineChart
private void initLineChar() { List<JsonData.HistoricalPrice.HistoricalPriceData.DataList> datalist = 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(List<JsonData.HistoricalPrice.HistoricalPriceData.DataList> datalist) { 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<Date> 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(ArrayList<Entry> values) { 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<ILineDataSet> dataSets = new ArrayList<ILineDataSet>(); //添加數據集 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,這個方法中添加判斷：
//設置最低點顯示的自定義viewif (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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
