Android實現(xiàn)價格走勢自定義曲線圖

更新時間：2017年04月08日 10:26:29 作者：一花一朝

本篇文章主要介紹了Android實現(xiàn)價格走勢曲線圖，非常具有實用價值，需要的朋友可以參考下

本文是引用開源圖表庫框架 MPAndroidChart的LineChart

地址：https://github.com/PhilJay/MPAndroidChart

1.需求：

（1）動態(tài)添加RadioButton，點擊改變下面的LineChart數(shù)據(jù)

（2）LineChart繪制價格走勢圖，只顯示最低點的小圓點和View,手指滑動，MarkView數(shù)據(jù)變化。

（3）服務(wù)端返回端數(shù)據(jù)，不是每一天端數(shù)據(jù)，但是x軸顯示的必須是每一天的數(shù)據(jù)，這里是有我自己處理過的。返回里需要顯示點的數(shù)組，之前的時間點顯示的就是第一個點值。

2.實現(xiàn)效果：

最低點顯示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初始化，數(shù)據(jù)的處理,已經(jīng)手勢的一些操作

簡單的說一下思路，因為 Linechart的x,y都是自定義的，但是我這里只自定義的y軸，是把x隱藏起來的，x軸只顯示最開始的點和結(jié)束的點，所以我這里有點投機，自己設(shè)置點兩個textview來顯示的

Linechart的點一設(shè)置都是統(tǒng)一所有點都設(shè)置的，但是需求上是得只在最低點顯示，并還要繪制一個view先初始化 View,然后解析數(shù)據(jù)，

 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());
    }

再根據(jù)解析的數(shù)據(jù)動態(tài)添加RadioButton

初始化LineChart

private void initLineChar() {
    List<JsonData.HistoricalPrice.HistoricalPriceData.DataList> datalist
        = removeDuplicteData(mHistoricalPrice.getData_list());
    //設(shè)置手勢滑動事件
    mLineChar.setOnChartGestureListener(this);
    //設(shè)置數(shù)值選擇監(jiān)聽
    mLineChar.setOnChartValueSelectedListener(this);
    //后臺繪制
    mLineChar.setDrawGridBackground(false);
    //設(shè)置描述文本
    mLineChar.getDescription().setEnabled(false);
    mLineChar.setTouchEnabled(true); // 設(shè)置是否可以觸摸
    mLineChar.setDragEnabled(true);// 是否可以拖拽
    mLineChar.setScaleXEnabled(true); //是否可以縮放 僅x軸
    mLineChar.setScaleYEnabled(true); //是否可以縮放 僅y軸
    mLineChar.setPinchZoom(true); //設(shè)置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);
  }

設(shè)置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();
    }

  }

這里是設(shè)置LineChart里面的數(shù)據(jù)

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 {
      // 創(chuàng)建一個數(shù)據(jù)集,并給它一個類型
      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); // 取消點擊線上的點展示十字標(biāo)識
        set1.setDrawValues(true); // 不展示線上面點的值
        //是否顯示小圓點
        set1.setDrawCircles(false);
        //修改源碼 自定義的參數(shù)，可以顯示最低點的View
        set1.setLowDrawCircles(true);
        set1.setCircleColors(Color.rgb(27, 198, 181));//27, 198, 181
        //頂點設(shè)置值
        set1.setDrawValues(false);
        set1.setFillColor(Color.rgb(203, 242, 238));
      }
      //修改源碼 自定義的參數(shù)，可以顯示最低點的View
      set1.setLowNumbers(minData);
      ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
      //添加數(shù)據(jù)集
      dataSets.add(set1);
      //創(chuàng)建一個數(shù)據(jù)集的數(shù)據(jù)對象
      LineData data = new LineData(dataSets);
      //設(shè)置數(shù)據(jù)
      mLineChar.setData(data);
    }
  }

這里是在源碼里新加的地方

 //修改源碼 自定義的參數(shù)，可以顯示最低點的View   
 set1.setLowDrawCircles(true);  
 set1.setLowNumbers(minData);

源碼修改部分：

1.在LineDataSet添加2個參數(shù)，復(fù)寫ILineDataSet新加的方法

 //是否顯示最低點的小圓點

 private boolean mDrawLowCircle = false;

 //最低點對應(yīng)的具體值

 private float mLowNumbers = 100f;

2.在ILineDataSet接口中添加2個方法

boolean isLowDrawCirclesEnabled();

float getLowNumbers();

3.修改源碼LineChartRenderer這個類的 drawValues(Canvas c)方法中，這里是設(shè)置最低點顯示的View,這個方法中添加判斷：

//設(shè)置最低點顯示的自定義view
if (dataSet.isLowDrawCirclesEnabled()) {
  if (entry.getY() == dataSet.getYMin()) {
    //設(shè)置在左邊
    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;
//設(shè)置最低點顯示的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;

  }

}

好了，所有功能的關(guān)鍵部分已經(jīng)講完了。大家不懂的可以留言提問，或者自己下載源碼看看：

github項目地址：https://github.com/Songyan992/LineChartStudy

源碼下載地址：LineChartStudy_jb51.rar

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: