Android图表控件MPAndroidChart之曲线图的实现

注：本博客主要是参考http://blog.csdn.net/ww897532167/article/details/77334345这篇文章

在贴代码之前先让我们熟悉一下图表类相同的地方

X轴：XAxis

Y轴：YAxis

图例：Legend

描述：Description

限制线：LimitLine

选中图表中的值，可显示的视图：MarkerView（这个是自己定义的，你可以根据自己需求更改） 具体在图表中的表现如下图

下面开始曲线图的实现

依赖：project build.gradle 中

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

app build.gradle 中

compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'

实现的代码

<com.github.mikephil.charting.charts.LineChart
   android:id="@+id/lineChart"
   android:layout_width="match_parent"
   android:layout_height="220dp"
   android:layout_centerInParent="true"/>

mLineChart = (LineChart) findViewById(R.id.lineChart);
//显示边界
mLineChart.setDrawBorders(true);

//得到X轴：
XAxis xAxis = mLineChart.getXAxis();
//设置X轴的位置（默认在上方）：
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//值：BOTTOM,BOTH_SIDED,BOTTOM_INSIDE,TOP,TOP_INSIDE
//设置X轴坐标之间的最小间隔（因为此图有缩放功能，X轴,Y轴可设置可缩放）
xAxis.setGranularity(1f);
//设置X轴的刻度数量
xAxis.setLabelCount(12, true);

      String[] array = new String[] {"一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"};
      mList = Arrays.asList(array);

//设置X轴值为字符串
xAxis.setValueFormatter(new IAxisValueFormatter() {
   @Override
   public String getFormattedValue(float value, AxisBase axis) {
      return mList.get((int) value); //mList为存有月份的集合
   }
});

YAxis leftYAxis = mLineChart.getAxisLeft();
leftYAxis.setAxisMinimum(2500f);
leftYAxis.setAxisMaximum(15000f);
//设置X轴的刻度数量
leftYAxis.setLabelCount(6, true);
YAxis rightYAxis = mLineChart.getAxisRight();
rightYAxis.setEnabled(false); //右侧Y轴不显示

Description description = new Description();
description.setEnabled(false);
mLineChart.setDescription(description);

Legend legend = mLineChart.getLegend();
legend.setTextColor(Color.CYAN); //设置Legend 文本颜色
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);


MyMarkerView mv = new MyMarkerView(this);
mLineChart.setMarker(mv);

自定义MarkerView

public class MyMarkerView extends MarkerView {

   private TextView tvContent;
   private DecimalFormat format = new DecimalFormat("##0");

   public MyMarkerView(Context context) {
      super(context, R.layout.layout_markerview);
      tvContent = (TextView) findViewById(R.id.tvContent);
   }

   @Override
   public void refreshContent(Entry e, Highlight highlight) {
      tvContent.setText(format.format(e.getX()+1)+"月"+"\n"+"酬薪："+e.getY());
      super.refreshContent(e, highlight);
   }

   @Override
   public MPPointF getOffset() {
      return new MPPointF(-(getWidth() / 2), -getHeight() - 10);
   }
}

数据更新，曲线更新

JsonResultParser parser = new JsonResultParser(this) {
   @Override
   protected void onSuccess(JSONObject json) throws Exception {
      //处理返回数据
      Log.e(TAG, json.toString());
      entries.clear();
      for (int i = 0; i < 12; i++) {
         entries.add(new Entry(i, 0));
      }
      JSONArray detailArr = json.optJSONArray("ContentList");
      int len = detailArr.length();
      if (null != detailArr && 0 != len) {
         for (int i = 0; i < detailArr.length(); i++) {
            JSONObject monObj = detailArr.getJSONObject(i);
            String month = monObj.optString("month","");
            String money = monObj.optString("money","");
            entries.set(Integer.parseInt(month)-1,new Entry(Integer.parseInt(month)-1, Float.parseFloat(money)));
            if (month.equals(mMonth)){
               textView_Money.setText(money+"￥");
            }
         }

      //一个LineDataSet就是一条线
      LineDataSet lineDataSet = new LineDataSet(entries, "收入统计");
      //设置曲线值的圆点是实心还是空心
      lineDataSet.setDrawCircleHole(false);
      //设置显示值的字体大小
      lineDataSet.setValueTextSize(9f);
      LineData data = new LineData(lineDataSet);
      mLineChart.setData(data);
      mLineChart.invalidate();

      }

   }

效果图如下：

现在没有请求的后台的数据这个效果图有机会再补上吧！大家也可添加一些假的数据查看效果，添加数据代码：

//设置数据
      List<Entry> entries = new ArrayList<Entry>();
      for (int i = 0; i < 12; i++) {
         entries.add(new Entry(i, (float) (Math.random()) * 12500+2500));
//       float data = dataObjects[i];
//       entries.add(new Entry(i, data));
      }
      //一个LineDataSet就是一条线
      LineDataSet lineDataSet = new LineDataSet(entries, "收入统计");
      //设置曲线值的圆点是实心还是空心
      lineDataSet.setDrawCircleHole(false);
      //设置显示值的字体大小
      lineDataSet.setValueTextSize(9f);
      LineData data = new LineData(lineDataSet);
      mLineChart.setData(data);
      mLineChart.invalidate();