首先上效果图，两条折线图数据。
下面上代码。
1.先上自己封装的MyLineChart代码。同样对属性进行了封装。设置数据调用setLineChartData()方法
public class MyLineChart extends LineChart { public ValueFormatter mXAxisFormatter; protected Typeface tfLight; private Context context; public MyLineChart(Context context) { super(context); tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf"); this.context=context; initLineChart(); } public MyLineChart(Context context, AttributeSet attrs) { super(context, attrs); tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf"); this.context=context; initLineChart(); } public MyLineChart(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf"); this.context=context; initLineChart(); } /** * 设置lineChart的一些属性配置 */ public void initLineChart() { // Typeface tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf"); this.setDrawGridBackground(false); this.getDescription().setEnabled(false); this.setDrawBorders(false); this.getAxisRight().setEnabled(false);//不要右边的y轴 XAxis xAxis = this.getXAxis(); xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setTypeface(tfLight); xAxis.setDrawGridLines(false); xAxis.setGranularity(1f); // only intervals of 1 day // mXAxisFormatter = new StringDataAxisValueFormatter();//TODO 这个控制横坐标的显示内容 // xAxis.setValueFormatter(mXAxisFormatter); xAxis.setLabelRotationAngle(-60);//设置x坐标的文字倾斜。为倾斜60° xAxis.setTextSize(9);//设置x轴文字大小 // xAxis.setAxisMinimum(0f);//这句话不能加。加了就会出现x轴下标为-1，第一个值不在原点了。 // enable touch gestures YAxis leftAxis = this.getAxisLeft(); leftAxis.setTypeface(tfLight); leftAxis.setDrawGridLines(true); leftAxis.setLabelCount(8, true);//这里设置y轴坐标数的个数。包含0点，有几个刻度 // leftAxis.setValueFormatter(custom); leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); leftAxis.setSpaceTop(15f); leftAxis.setAxisMinimum(0f); //保证y轴从0开始 不然会上移一点 this replaces setStartAtZero(true) this.setTouchEnabled(true); // enable scaling and dragging this.setDragEnabled(true); //设置是否可以缩放。false不能放大缩小。但是如果显示不全可以左右滑动 this.setScaleEnabled(false); // if disabled, scaling can be done on x- and y-axis separately this.setPinchZoom(false); // this.setExtraBottomOffset(10f); /** 图例的属性 */ Legend l = this.getLegend(); l.setEnabled(false);//不显示图例 底部的什么颜色代表什么的说明 //决定底部图例的位置。 // l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); // l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER); // l.setOrientation(Legend.LegendOrientation.HORIZONTAL); // l.setDrawInside(false); // l.setForm(Legend.LegendForm.LINE);//下面的图例是正方形还是线型样式，等其其它 // l.setFormSize(30f);//代表图下面图例大小 // l.setTextSize(11f); // l.setXEntrySpace(10f); } public void setLineChartData(List<List<Entry>> values, String[] mSsLable) { if (getData() != null && getData().getDataSetCount() > 0) { for (int i = 0; i < mSsLable.length; i++) { LineDataSet set1 = (LineDataSet) getData().getDataSetByIndex(i); set1.setValues(values.get(i)); set1.notifyDataSetChanged(); } getData().notifyDataChanged(); notifyDataSetChanged(); } else { ArrayList<ILineDataSet> dataSets = new ArrayList<>(); int[] colors = {ContextCompat.getColor(context, R.color.yiban_color) , ContextCompat.getColor(context, R.color.xiaoguimo_color) }; for (int z = 0; z < mSsLable.length; z++) { LineDataSet d = new LineDataSet(values.get(z), mSsLable[z]);//每一条折线的属性设置 d.setLineWidth(2.5f); // d.setCircleRadius(4f); d.setDrawValues(false); // 设置是否显示数据点的值 int color = colors[z % colors.length]; d.setColor(color);//设置折现的颜色 d.setCircleColor(color);//设置折线图圆圈点的颜色 //添加下面这行代码 LineChart实现曲线样式 // d.setMode(LineDataSet.Mode.CUBIC_BEZIER);//曲线 d.setMode(LineDataSet.Mode.LINEAR);//折现 // d.setCircleColor(color); dataSets.add(d); } LineData data = new LineData(dataSets); this.setData(data); } this.invalidate(); //TODO 设置完数据后。必须设置完数据后才有效设置最大显示15个。多的话需要滑动查看,最少也要15.这样就固定。 就算只有1个。还是在固定的位置。 setVisibleXRangeMaximum(15); setVisibleXRangeMinimum(13); } }2.布局文件里面，引用自己封装的MylineChart
<com.lyf.demo.view.MPChart.MyLineChart android:id="@+id/lineChart" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/rl_title" android:layout_marginBottom="10dp" />3.在activity里面拿到MyLineChart对象。然后设置数据调用MyLineChart对象的setLineChartData()。
(1)看一下我们的网络数据是一个list，里面的BarDateBean内容
public class BarDataBean implements Serializable { private String ssdsmc;//城市，或者区县 x轴内容 private float ybr;// 订单个数 y轴内容 private float xgm;// 订单个数 y轴内容 private float hj;//合计 public BarDataBean(String ssdsmc, float ybr, float xgm, float hj) { this.ssdsmc = ssdsmc; this.ybr = ybr; this.xgm = xgm; this.hj = hj; } //set,get方法我这里就不粘贴了。 }
（2）得到网络数据后我们如何给柱状图设置数据代码如下。
private String[] mSsLable = new String[]{"手机", "电脑"};//图例
ArrayList<BarEntry> values = new ArrayList<>();//柱状图需要的数据，values是网络得到的数据。得到数据后调用setChartData方法设置数据就可以。（values的数据可以自己模拟几条感受一下）
private void setChartData() { getLineChartData(); setXAxis(lineChart.getXAxis()); lineChart.setLineChartData(lineDataList, mSsLable); } /** * 把得到的网络是数据转为lineChart需要的数据类型。 */ private void getLineChartData() {//这里我是知道了。只有2条线。两条数据。多的话，需要多条处理 lineDataList.clear(); for (int z = 0; z < mSsLable.length; z++) { ArrayList<Entry> values = new ArrayList<>(); for (int i = 0; i < valueList.size(); i++) { if (z == 0) { values.add(new Entry(i, (float) valueList.get(i).getYbr())); } else { values.add(new Entry(i, (float) valueList.get(i).getXgm())); } } lineDataList.add(values); } } private void setXAxis(XAxis xAxis) { /** (1)第一种就是先给x轴设置ValueFOrmatter，然后这里直接刷新。（2）或者就是不设置。这里直接设置。 第一种更新一下，x轴的数据。这样到x轴得到了更新，点击某个弹出的悬浮框内容也得到了更新。或者悬浮框也在这里设置market*/ // ((StringDataAxisValueFormatter)mXAxisFormatter).refreshList(valueList); StringDataAxisValueFormatter xFormatter = new StringDataAxisValueFormatter() { //设置每个x轴的内容 @Override public String getFormattedValue(float value) {//这个value是那边BarEntry得到的x的值。 try { String cityName= (valueList.get((int) value)).getSsdsmc(); if(cityName.length()>4){ String bb = cityName.substring(0, 3); cityName=bb+"..."; } return cityName; } catch (Exception e) { e.printStackTrace(); return ""; } } }; xAxis.setValueFormatter(xFormatter); int lineLayoutId=R.layout.my_custom_line_marker_view; MyCustomMarkerView lineMv = new MyCustomMarkerView(this, valueList,lineLayoutId); // mv.setChartView(lineChart); // For bounds control lineChart.setMarker(lineMv);//折线图设置market xAxis.setLabelCount(valueList.size());//TODO 这里决定者x轴显示的个数 拿到数据库再设置显示个数,也不确定起作用了没，反正后面加上true。就都乱了 }（3）MyCustomMarkerView的代码可以参照我的上一篇文章。有代码
https://blog.csdn.net/bangyiqing/article/details/107068655
