1 首先在 build.gradle 里导入包
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
2.新建 启动Activity
LineChartActivity 如下
1 ** 2 * @Author: Bytezero_zhengLei 3 * @Time: 2023/3/24 10:12 4 * @Project_Name: LineChartActivity.java 5 * @Email: [email protected] 6 * @Description: 7 * @TODO: 折线图 8 */ 9 10 public class LineChartActivity extends AppCompatActivity { 11 12 private LineChart lineChart; 13 List<IncomeBean> list = new ArrayList<>(); 14 15 @Override 16 protected void onCreate(Bundle savedInstanceState) { 17 super.onCreate(savedInstanceState); 18 setContentView(R.layout.activity_line_chart); 19 20 lineChart = (LineChart) findViewById(R.id.linechart); 21 22 lineChart = MPAndroidUtil.initChart(this, lineChart); 23 24 25 26 27 for (int i =0; i <10; i ++){ 28 IncomeBean incomeBean = new IncomeBean(36.5,"2020-01-01 00:00:00"); 29 list.add(incomeBean); 30 31 } 32 33 // 开始画折线图 34 setLineChart(list, "BMI" + "kg/²", getResources().getColor(R.color.bule_title)); 35 } 36 37 38 //设置折线 39 40 41 public void setLineChart(List<IncomeBean> mLineChart, String string, int color) { 42 lineChart = MPAndroidUtil.initChart(this, lineChart); 43 lineChart.setData(MPAndroidUtil.showLineChart(mLineChart, string, color)); 44 //设置一页最大显示个数为6,超出部分就滑动 45 float ratio = (float) mLineChart.size() / (float) 6; 46 //显示的时候是按照多大的比率缩放显示,1f表示不放大缩小 47 // lineChart.zoom(ratio, 1f, 0, 0); 48 // 设置填充图 49 Drawable drawable = getResources().getDrawable(R.drawable.fade_blue); 50 MPAndroidUtil.setChartFillDrawable(drawable, lineChart); 51 // 设置点击的弹窗 52 MPAndroidUtil.setMarkerView1(lineChart); 53 54 55 /* lineChart.getLineData().addDataSet(MPAndroidUtil.addLine(list1, "地位条", getResources().getColor(R.color.text_orange))); 56 lineChart.invalidate();*/ 57 58 } 59 }
3.新建数据 IncomeBean
1 /** 2 * @Author: Bytezero_zhengLei 3 * @Time: 2023/3/24 10:24 4 * @Project_Name: IncomeBean.java 5 * @Email: [email protected] 6 * @Description: 7 * @TODO: 8 */ 9 10 public class IncomeBean implements Serializable { 11 public String tradeDate;// 时间 12 public double value;// 数值 13 14 public IncomeBean(double mValue, String mTradeDate) { 15 tradeDate = mTradeDate; 16 value = mValue; 17 } 18 19 @Override 20 public String toString() { 21 return "IncomeBean{" + 22 "tradeDate='" + tradeDate + '\'' + 23 ", value=" + value + 24 '}'; 25 } 26 }
4.制定折线图的属性 MPAndroidUtil
1 /** 2 * @Author: Bytezero_zhengLei 3 * @Time: 2023/3/24 10:20 4 * @Project_Name: MPAndroidUtil.java 5 * @Email: [email protected] 6 * @Description: 7 * @TODO: 8 */ 9 10 public class MPAndroidUtil { 11 private static final String TAG = "MPAndroidUtil"; 12 private static XAxis xAxis = null; //X轴 13 private static YAxis leftYAxis; //左侧Y轴 14 private static YAxis rightYaxis; //右侧Y轴 15 private static Legend legend; //图例 16 17 18 /** 19 * 初始化图表 折线图 20 */ 21 public static LineChart initChart(Context context, LineChart lineChart) { 22 23 /***图表设置***/ 24 //是否展示网格线 25 lineChart.setDrawGridBackground(false); 26 //是否显示边界 27 lineChart.setDrawBorders(false); 28 //是否可以拖动 29 lineChart.setDragEnabled(false); 30 //是否有触摸事件 31 lineChart.setTouchEnabled(true); 32 // 关闭双击放大功能 33 lineChart.setDoubleTapToZoomEnabled(false); 34 //设置XY轴动画效果 35 lineChart.animateY(2500); 36 lineChart.animateX(1500); 37 38 lineChart.setBackgroundColor(context.getResources().getColor(R.color.white)); 39 40 41 /***XY轴的设置***/ 42 xAxis = null; 43 xAxis = lineChart.getXAxis(); 44 leftYAxis = lineChart.getAxisLeft(); 45 rightYaxis = lineChart.getAxisRight(); 46 //X轴设置显示位置在底部 47 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); 48 xAxis.setAxisMinimum(0f); 49 xAxis.setGranularity(1f); 50 //保证Y轴从0开始,不然会上移一点 51 leftYAxis.setAxisMinimum(0f); 52 rightYaxis.setAxisMinimum(0f); 53 54 // 但还是显示了网格线,而且不是我们想要的 虚线 。其实那是 X Y轴自己的网格线,禁掉即可 55 xAxis.setDrawGridLines(false); 56 rightYaxis.setDrawGridLines(false); 57 leftYAxis.setDrawGridLines(true); 58 //设置X Y轴网格线为虚线(实体线长度、间隔距离、偏移量:通常使用 0) 59 leftYAxis.enableGridDashedLine(10f, 10f, 0f); 60 // 目标效果图没有右侧Y轴,所以去掉右侧Y轴 61 rightYaxis.setEnabled(false); 62 63 /***折线图例 标签 设置***/ 64 legend = lineChart.getLegend(); 65 //legend.setEnabled(false); 66 //设置显示类型,LINE CIRCLE SQUARE EMPTY 等等 多种方式,查看LegendForm 即可 67 legend.setForm(Legend.LegendForm.LINE); 68 legend.setTextSize(12f); 69 //显示位置 左下方 70 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); 71 legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); 72 legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); 73 //是否绘制在图表里面 74 legend.setDrawInside(false); 75 // legend.setExtra(mLegendEntries); 76 77 // lineChart.setNoDataText(context.getResources().getString(R.string.No_data)); 78 lineChart.setNoDataText(" "); 79 // 设置右下角的提示 80 Description description = new Description(); 81 // description.setText("需要展示的内容"); 82 description.setEnabled(false); 83 lineChart.setDescription(description); 84 85 lineChart.setExtraBottomOffset(2 * 8f); 86 87 lineChart.setXAxisRenderer(new CustomXAxisRenderer(lineChart.getViewPortHandler(), lineChart.getXAxis(), lineChart.getTransformer(YAxis.AxisDependency.LEFT))); 88 return lineChart; 89 } 90 91 92 /** 93 * 曲线初始化设置 一个LineDataSet 代表一条曲线 94 * 95 * @param lineDataSet 线条 96 * @param color 线条颜色 97 * @param mode 98 */ 99 public static LineDataSet initLineDataSet(LineDataSet lineDataSet, int color, LineDataSet.Mode mode) { 100 lineDataSet.setColor(color); 101 lineDataSet.setCircleColor(color); 102 lineDataSet.setLineWidth(1f); 103 lineDataSet.setCircleRadius(2f); 104 //设置曲线值的圆点是实心还是空心 105 lineDataSet.setDrawCircleHole(true); 106 lineDataSet.setValueTextSize(10f); 107 //设置折线图填充 108 lineDataSet.setDrawFilled(true); 109 lineDataSet.setFormLineWidth(1f); 110 lineDataSet.setFormSize(15.f); 111 if (mode == null) { 112 //设置曲线展示为圆滑曲线(如果不设置则默认折线) 113 lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); 114 } else { 115 lineDataSet.setMode(mode); 116 } 117 // 不显示值 118 lineDataSet.setDrawValues(false); 119 return lineDataSet; 120 121 } 122 123 public static LineData showLineChart(final List<IncomeBean> dataList, String name, int color) { 124 List<Entry> entries = new ArrayList<>(); 125 for (int i = 0; i < dataList.size(); i++) { 126 IncomeBean data = dataList.get(i); 127 /** 128 * 在此可查看 Entry构造方法,可发现 可传入数值 Entry(float x, float y) 129 * 也可传入Drawable, Entry(float x, float y, Drawable icon) 可在XY轴交点 设置Drawable图像展示 130 */ 131 Entry entry = new Entry(i, (float) data.value); 132 entries.add(entry); 133 } 134 xAxis.setValueFormatter(new IndexAxisValueFormatter() { 135 @Override 136 public String getFormattedValue(float value) { 137 String tradeDate; 138 try { 139 tradeDate = dataList.get((int) value % dataList.size()).tradeDate; 140 } catch (Exception mE) { 141 tradeDate = "2020-01-01 00:00:00"; 142 } 143 144 return StrToStr("yyyy-MM-dd HH:mm:ss", "MM-dd HH:mm", tradeDate); 145 } 146 }); 147 148 149 xAxis.setLabelCount(6, false); 150 151 leftYAxis.setLabelCount(8); 152 // 每一个LineDataSet代表一条线 153 LineDataSet lineDataSet = new LineDataSet(entries, name); 154 lineDataSet = initLineDataSet(lineDataSet, color, LineDataSet.Mode.CUBIC_BEZIER); 155 LineData lineData = new LineData(lineDataSet); 156 return lineData; 157 158 } 159 160 public static void setMarkerView1(LineChart lineChart) { 161 // LineChartMarkView1 mv = new LineChartMarkView1(MApplication.getInstance(), xAxis.getValueFormatter()); 162 LineChartMarkView1 mv = new LineChartMarkView1(lineChart.getContext(), xAxis.getValueFormatter()); 163 mv.setChartView(lineChart); 164 lineChart.setMarker(mv); 165 lineChart.invalidate(); 166 } 167 168 169 /* 170 * 设置线条填充背景颜色 171 * 172 * @param drawable 173 */ 174 public static LineChart setChartFillDrawable(Drawable drawable, LineChart mLineChart) { 175 if (mLineChart.getData() != null && mLineChart.getData().getDataSetCount() > 0) { 176 LineDataSet lineDataSet = (LineDataSet) mLineChart.getData().getDataSetByIndex(0); 177 //避免在 initLineDataSet()方法中 设置了 lineDataSet.setDrawFilled(false); 而无法实现效果 178 lineDataSet.setDrawFilled(true); 179 lineDataSet.setFillDrawable(drawable); 180 181 mLineChart.invalidate(); 182 183 } 184 return mLineChart; 185 } 186 187 188 // 传入某种格式的时间格式,得到特定的时间格式 189 public static String StrToStr(String SimpleDateFormat_in, String SimpleDateFormat_out, String str) { 190 SimpleDateFormat format = new SimpleDateFormat(SimpleDateFormat_in); 191 SimpleDateFormat format1 = new SimpleDateFormat(SimpleDateFormat_out); 192 Date date = null; 193 try { 194 date = format.parse(str); 195 } catch (ParseException e) { 196 e.printStackTrace(); 197 } 198 return format1.format(date.getTime()); 199 } 200 201 202 }
5.LineChartMarkView1
1 ** 2 * @Author: Bytezero_zhengLei 3 * @Time: 2023/3/24 10:45 4 * @Project_Name: LineChartMarkView1.java 5 * @Email: [email protected] 6 * @Description: 7 * @TODO: 8 */ 9 10 public class LineChartMarkView1 extends MarkerView { 11 12 private TextView tvDate; 13 private TextView tvValue; 14 private IAxisValueFormatter xAxisValueFormatter; 15 DecimalFormat df = new DecimalFormat(".00"); 16 17 public LineChartMarkView1(Context context, IAxisValueFormatter xAxisValueFormatter) { 18 super(context, R.layout.layout_markview1); 19 this.xAxisValueFormatter = xAxisValueFormatter; 20 21 tvDate = findViewById(R.id.tv_date); 22 tvValue = findViewById(R.id.tv_value); 23 } 24 25 @SuppressLint("SetTextI18n") 26 @Override 27 public void refreshContent(Entry e, Highlight highlight) { 28 Chart chart = getChartView(); 29 if (chart instanceof LineChart) { 30 LineData lineData = ((LineChart) chart).getLineData(); 31 //获取到图表中的所有曲线 32 List<ILineDataSet> dataSetList = lineData.getDataSets(); 33 for (int i = 0; i < dataSetList.size(); i++) { 34 LineDataSet dataSet = (LineDataSet) dataSetList.get(i); 35 //获取到曲线的所有在Y轴的数据集合,根据当前X轴的位置 来获取对应的Y轴值 36 float y = dataSet.getValues().get((int) e.getX()).getY(); 37 if (i == 0) { 38 tvValue.setText(dataSet.getLabel() + ":" + e.getY()); 39 } 40 } 41 tvDate.setText(xAxisValueFormatter.getFormattedValue(e.getX(), null)); 42 } 43 44 super.refreshContent(e, highlight); 45 } 46 47 @Override 48 public MPPointF getOffset() { 49 return new MPPointF(-(getWidth() / 2), -getHeight()); 50 51 } 52 }
6.CustomXAxisRenderer
1 /** 2 * @Author: Bytezero_zhengLei 3 * @Time: 2023/3/24 10:23 4 * @Project_Name: CustomXAxisRenderer.java 5 * @Email: [email protected] 6 * @Description: 7 * @TODO: 8 */ 9 10 public class CustomXAxisRenderer extends XAxisRenderer { 11 public CustomXAxisRenderer(ViewPortHandler viewPortHandler, XAxis xAxis, Transformer trans) { 12 super(viewPortHandler, xAxis, trans); 13 } 14 15 @Override 16 protected void drawLabel(Canvas c, String formattedLabel, float x, float y, MPPointF anchor, float angleDegrees) { 17 // super.drawLabel(c, formattedLabel, x, y, anchor, angleDegrees);//注释掉这个,否则坐标标签复写两次 18 String[] lines = formattedLabel.split(" "); 19 for (int i = 0; i < lines.length; i++) { 20 float vOffset = i * mAxisLabelPaint.getTextSize(); 21 Utils.drawXAxisValue(c, lines[i], x, y + vOffset, mAxisLabelPaint, anchor, angleDegrees); 22 } 23 } 24 }
5.一些 小的 layout
LineChartMarkView1的layout
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="wrap_content" 3 android:layout_height="wrap_content" 4 android:background="@drawable/shape_square" 5 android:orientation="vertical"> 6 7 <TextView 8 android:id="@+id/tv_date" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:textColor="@android:color/white" /> 12 13 <TextView 14 android:id="@+id/tv_value" 15 android:layout_width="wrap_content" 16 android:layout_height="wrap_content" 17 android:layout_marginTop="5dp" 18 android:textColor="@android:color/white" /> 19 </LinearLayout>
6.LineChartActivity中的 layout
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:app="http://schemas.android.com/apk/res-auto" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 tools:context=".LineChart.LineChartActivity"> 7 8 <com.github.mikephil.charting.charts.LineChart 9 android:layout_gravity="center" 10 android:id="@+id/linechart" 11 android:layout_width="match_parent" 12 android:layout_height="300dp" /> 13 14 15 16 17 18 </LinearLayout>
这样就ok了
标签:lineChart,String,Demo,float,lineDataSet,折线图,new,Android,public From: https://www.cnblogs.com/Bytezero/p/17250982.html