Android中mpchartlib折线图的详细属性以及实现（双曲线）

冒充前言的前言
个人觉得，这个第三方功能还是十分强大的，至少我的这几个项目所需的功能都可以满足。嗯，还是说说这个东西怎么用吧，以及各个属性的意思吧。

step1：下载mpchartlib.jar，放进项目，add as library即可。

jar包下载地址：

http://download.csdn.net/download/qq_34947883/9937839

step2:放入布局文件中,如下所示：

    <!--折线图-->     <com.github.mikephil.charting.charts.LineChart        android:id="@+id/lineChart"        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_margin="10dp"/>

step3:在Activity中找到控件，然后设置相应的属性以及填充数据（copy整个类啦，这样实现也方便一些）

public class MyLineChartActivity extends AppCompatActivity implements OnChartValueSelectedListener {    public static int ChartClickPosition=0;//用一个静态变量记录折线图被点击数值对应的横坐标    private LineChart mLineChart;    private List<String> datas,datas2;//两条折线图的数据源    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_my_line_chart);        initView();        initData();        setDateForLineChart();    }    //初始化控件    public void initView() {        datas = new ArrayList<>();        datas2 = new ArrayList<>();        mLineChart = (LineChart) findViewById(R.id.lineChart);    }    //模拟数据源    private void initData() {        Random random = new Random();        for (int i = 0; i < 8; i++) {            if (i%6==0&&i!=0){                datas.add("超时");//模拟无数据            }else{                datas.add( random.nextInt(66)+"");//生成0-66的随机整数            }        }        for (int i = 0; i < 8; i++) {            if (i%6==0&&i!=0){                datas2.add("超时");//模拟无数据            }else{                datas2.add( random.nextInt(66)+"");//生成0-66的随机整数            }        }    }    //为折线图设置数据    private void setDateForLineChart() {        initSrc();        ArrayList<String> xValues = initXAxis();        initYAxis();        LineDataSet dataSet1 = initYValueAxis("one");//可创建多条线        LineDataSet dataSet2 = initYValueAxis("two");        //构建一个类型为LineDataSet的ArrayList 用来存放所有 y的LineDataSet   它是构建最终加入LineChart数据集所需要的参数        ArrayList<LineDataSet> dataSets = new ArrayList<>();        dataSets.add(dataSet1); //将数据加入dataSets        dataSets.add(dataSet2); //将数据加入dataSets        LineData lineData = new LineData(xValues, dataSets);   //构建一个LineData  将dataSets放入        mLineChart.setData(lineData);  //将数据绑定到图表        mLineChart.invalidate();//刷新图表    }    private void initSrc() {        mLineChart.setOnChartValueSelectedListener(this);//设置监听        //折线图与用户交互        mLineChart.setTouchEnabled(true); // 设置是否可以触摸        mLineChart.setDragEnabled(false);// 是否可以拖拽        mLineChart.setScaleEnabled(false);// 是否可以缩放        mLineChart.setDrawBorders(false);  //是否在折线图上添加边框        mLineChart.setPinchZoom(false);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放        mLineChart.setDoubleTapToZoomEnabled(false);//设置双击不放大        mLineChart.setNoDataTextDescription("暂无数据");        mLineChart.setDescriptionColor(0xffffffff);//设置数据描述的字体颜色        mLineChart.setDescriptionPosition(100, 15);//数据描述的位置        mLineChart.setGridBackgroundColor(0x00000000);//透明色        mLineChart.animateXY(1000, 1000);    //从XY轴一起进入的动画        mLineChart.setDescription("");        mLineChart.setBackgroundColor(0xff0092F3);//设置整个折线图的背景颜色        MyMarkerView mv = new MyMarkerView(MyLineChartActivity.this, R.layout.custom_marker_view);        mLineChart.setMarkerView(mv);        Legend mLegend = mLineChart.getLegend(); // 设置比例图标示        mLegend.setForm(Legend.LegendForm.CIRCLE);  //设置图最下面显示的类型    CIRCLE小圆圈   SQUARE正方形    LINE直线        mLegend.setEnabled(true); //设置图最下面的比例图标是否显示        mLegend.setTextColor(0xffffffff);    }    private ArrayList<String> initXAxis() {        //X轴样式设置        XAxis xAxis = mLineChart.getXAxis();        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);// 设置x轴在底部显示        xAxis.setSpaceBetweenLabels(50); // x轴间距，对折线图来说好像没啥用        xAxis.setAxisLineColor(0x00000000);//设置横坐标线的颜色        xAxis.setDrawGridLines(false);//设置是否显示横轴表格        xAxis.setTextColor(0xffffffff);//设置横坐标文字的颜色        xAxis.setLabelsToSkip(0);//横坐标间隔数        //x轴数据        ArrayList<String> xValues = new ArrayList<>();        for (int i = 1; i <= datas.size(); i++) {//我这里设置横坐标从一显示了            xValues.add(i + "");        }        return xValues;    }    private void initYAxis() {        // 左面y轴样式设置        YAxis yleftAxis = mLineChart.getAxisLeft();        yleftAxis.setDrawGridLines(false); //设置显示Y轴表格线        yleftAxis.setStartAtZero(false);//设置数据不从零显示        yleftAxis.setAxisLineColor(0x00000000);//透明色        yleftAxis.setTextColor(0xffffff);        yleftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);        // 右面y轴样式设置        YAxis yrightAxis = mLineChart.getAxisRight();        yrightAxis.setDrawGridLines(false);//设置隐藏Y轴表格线        yrightAxis.setDrawLabels(false);//设置右侧Y轴是否显示 Label        yrightAxis.setDrawAxisLine(false);    }    private LineDataSet initYValueAxis(String type) {        ArrayList<Entry> yValue1 = new ArrayList<>();        if (type.equals("one")){            for (int i = 0; i <datas.size(); i++) {                try {                    if (i < datas.size()) {                        String yDataStr = datas.get(i);                        if (yDataStr != null && !yDataStr.equals("超时")) {//如果数据有效（有数据），显示                            yValue1.add(new Entry(Float.parseFloat(yDataStr), i));                        }                    }                } catch (Exception e) {                    //  e.printStackTrace();                    return null;                }            }        }else if(type.equals("two")){            for (int i = 0; i <datas2.size(); i++) {                try {                    if (i < datas2.size()) {                        String yDataStr = datas2.get(i);                        if (yDataStr != null && !yDataStr.equals("超时")) {//如果数据有效（有数据），显示                            yValue1.add(new Entry(Float.parseFloat(yDataStr), i));                        }                    }                } catch (Exception e) {                    //  e.printStackTrace();                    return null;                }            }        }        /**         * 曲线样式设置         */        LineDataSet dataSet1;//构建一个LineDataSet 代表一组Y轴数据        String title= (type.equals("one")?"oneChart":"twoChart");        dataSet1 = new LineDataSet(yValue1,title);        dataSet1.setDrawValues(false);        if (type.equals("one")){            dataSet1.setColor(0xffffffff);//折线图线的颜色            dataSet1.setCircleColor(0xffffffff);//圆圈颜色            dataSet1.setCircleColorHole(0xff148CEF);//圆实心颜色        }else if (type.equals("two")){            dataSet1.setColor(0xab404040);//折线图线的颜色            dataSet1.setCircleColor(0xab404040);//圆圈颜色            dataSet1.setCircleColorHole(0x148CEF);//圆实心颜色        }        dataSet1.setCircleSize(2.5f);//设置圆的尺寸        dataSet1.setHighLightColor(0x90ffffff);//设置点击数值时，出现横纵坐标线的颜色        dataSet1.setLineWidth(1f);        dataSet1.setDrawCubic(true);  //设置曲线为圆滑的线        return dataSet1;    }    @Override    public void onValueSelected(Entry entry, int i, Highlight highlight) {        ChartClickPosition=entry.getXIndex();//获取当前点击的横坐标，并保存    }    @Override    public void onNothingSelected() {    }}

step4:layout.custom_marker_view.xml，样式咋好看咋改

    <TextView        android:id="@+id/tvContent"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="5dp"        android:layout_centerHorizontal="true"        android:textSize="9sp"        android:textColor="#ffffff" />

step5: MyMarkerView .class

public class MyMarkerView extends MarkerView {    private TextView tvContent;    public MyMarkerView(Context context, int layoutResource) {        super(context, layoutResource);        tvContent = (TextView) findViewById(R.id.tvContent);    }    // callbacks everytime the MarkerView is redrawn, can be used to update the    // content    @Override    public void refreshContent(Entry e, int dataSetIndex) {        if (e instanceof CandleEntry) {            CandleEntry ce = (CandleEntry) e;            tvContent.setText("" + ce.getHigh());//值为浮点数            //tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));//值为四舍五入后的整数        } else {            tvContent.setText("" + e.getVal());//值为浮点数            //tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));//值为四舍五入后的整数        }    }    @Override    public int getXOffset() {//设置偏移量        if (MyLineChartActivity.ChartClickPosition <= 3) {//避免数值与纵坐标重叠            return 0;        } else {            return -getMeasuredWidth();        }    }    @Override    public int getYOffset() {//设置偏移量        return -getMeasuredHeight();    }}

step6:上传一张效果图

冒充后记的后记
1、横纵坐标的数据我动态填充的，因为毕竟项目中数据都比较灵活嘛。
2、在没有值的情况下，可以自己添加一个标识，添加y轴数据的时候自己判断就好了。
3、如果添加多条线的时候，需要多条线的横坐标数量保持一致才行，要不然程序就挂了。
4、以上内容纯属个人理解，如有不妥之处，请指出。如有雷同，那就算咱俩心有灵犀吧，哈哈。
5、还有啊，解释权归本人所有。

源码下载：

http://download.csdn.net/download/qq_34947883/9937739