MPAndroidChart图表库之折线图

开始了解折线图，是从项目需求开始的，刚开始在网上也了解了一些关于折线图的实现，有的选择自定义，无意间找到了android开源库MPAndroidChart，这个开源库可以实现折线图、柱状图和比例图等等，这里主要还是讲讲折线图的简单实现；

首先我们在布局中定义：

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart_line"
    android:layout_width="match_parent"
    android:layout_height="320dp"
    android:layout_gravity="center_horizontal"/>

然后对折线图的数据进行初始化，拿到纵横坐标的数据：

/**
 *
 * @param countX 横向有多少个单位
 * @param countY 纵向有多少个单位
 * @return
 */
private LineData getLineData(int countX, int countY) {
    ArrayList<String> xValues = new ArrayList<String>();
    for (int i = 0; i < countX; i++) {
        // x轴显示的数据，这里默认使用数字下标显示
        xValues.add("" + i);
    }
    // y轴的取随机数据
    ArrayList<Entry> yValues = new ArrayList<Entry>();
    for (int i = 0; i < countX; i++) {
        float value = (float) (Math.random() * countY) + 3;
        yValues.add(new Entry(value, i));
    }
    // y轴的数据集合
    LineDataSet lineDataSet = new LineDataSet(yValues, "数据折线图" /*显示在比例图上*/);
    // mLineDataSet.setFillAlpha(110);
    // mLineDataSet.setFillColor(Color.RED);
    //用y轴的集合来设置参数
    lineDataSet.setLineWidth(1.75f); // 线宽
    lineDataSet.setCircleSize(3f);// 显示的圆形大小
    lineDataSet.setColor(Color.WHITE);// 显示颜色
    lineDataSet.setCircleColor(Color.WHITE);// 圆形的颜色
    lineDataSet.setHighLightColor(Color.WHITE); // 高亮的线的颜色
    ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();
    lineDataSets.add(lineDataSet); // add the datasets
    LineData lineData = new LineData(xValues, lineDataSets);
    return lineData;
}

然后对折线图的样式进行一个设置，像放大缩小，点的颜色、折线的颜色，背景色等等；

private void initChart() {
    LineChart chart_line = (LineChart) findViewById(R.id.chart_line);
    LineData lineData = getLineData(36,100);
    showChart(chart_line, lineData, Color.rgb(96, 195, 137));
}

// 设置显示的样式
private void showChart(LineChart lineChart, LineData lineData, int color) {
    lineChart.setDrawBorder(false); //是否在折线图上添加边框
    lineChart.setDescription("");// 数据描述
    // 如果没有数据的时候，会显示这个，类似listview的emtpyview
    lineChart.setNoDataTextDescription("You need to provide data for the chart.");
    lineChart.setDrawGridBackground(false); // 是否显示表格颜色
    lineChart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格的的颜色，在这里是是给颜色设置一个透明度
    lineChart.setTouchEnabled(true); // 设置是否可以触摸
    lineChart.setDragEnabled(true);// 是否可以拖拽
    lineChart.setScaleEnabled(true);// 是否可以缩放
    lineChart.setPinchZoom(false);//
    lineChart.setBackgroundColor(color);// 设置背景
    lineChart.setData(lineData); // 设置数据
    Legend mLegend = lineChart.getLegend(); // 设置比例图标示，就是那个一组y的value的
    // mLegend.setPosition(LegendPosition.LEFT_OF_CHART);
    mLegend.setForm(Legend.LegendForm.CIRCLE);// 样式
    mLegend.setFormSize(6f);// 字体
    mLegend.setTextColor(Color.WHITE);// 颜色
    //mLegend.setTypeface(mTf);// 字体
    lineChart.animateX(2500); // 立即执行的动画,x轴
}

最后实现的效果图如下：