开始了解折线图，是从项目需求开始的，刚开始在网上也了解了一些关于折线图的实现，有的选择自定义，无意间找到了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轴 }
最后实现的效果图如下：
