发现最新的MPAndroidChart和以前版本的使用有一些差距,就写下了现在新版的使用方法
相关文章:
Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3.0)
Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)
Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据
Android图表控件MPAndroidChart——柱状图BarChart的使用(多条柱状图)
Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用
Android图表控件MPAndroidChart——源码修改实现曲线图X轴直尺刻度样式
一.效果图
1.一条曲线图,带限制线
2.多条曲线图
二.MPAndroidChart的使用
MPAndroidChart在github上16.6K个star,是一款十分强大的图表框架。
地址:https://github.com/PhilJay/MPAndroidChart
1.Android Studio中依赖:
根目录build.gradle文件中加入:
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
在app的build.gradle上加入:
dependencies {
compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
}
2.LineChart涉及到的常用类
X轴——XAxis
Y轴——YAxis
限制线——LimitLine
曲线描述——Legend
图表描述(可当作X轴描述)——Description
3.具体代码
想要显示曲线图需要
a).得到LineChart对象
b).得到Entry对象,此处添加(X,Y)数据
c).得到LineDataSet对象(一个LineDataSet对象代表一条线)
d).得到LineData对象并添加LineDataSet对象
e).设置数据,显示图表:lineChart.setData(lineData)
写了一个LineChart管理类
public class LineChartManager { private LineChart lineChart; private YAxis leftAxis; //左边Y轴 private YAxis rightAxis; //右边Y轴 private XAxis xAxis; //X轴 public LineChartManager(LineChart mLineChart) { this.lineChart = mLineChart; leftAxis = lineChart.getAxisLeft(); rightAxis = lineChart.getAxisRight(); xAxis = lineChart.getXAxis(); } /** * 初始化LineChart */ private void initLineChart() { lineChart.setDrawGridBackground(false); //显示边界 lineChart.setDrawBorders(true); //设置动画效果 lineChart.animateY(1000, Easing.EasingOption.Linear); lineChart.animateX(1000, Easing.EasingOption.Linear); //折线图例 标签 设置 Legend legend = lineChart.getLegend(); legend.setForm(Legend.LegendForm.LINE); legend.setTextSize(11f); //显示位置 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); legend.setDrawInside(false); //XY轴的设置 //X轴设置显示位置在底部 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setAxisMinimum(0f); xAxis.setGranularity(1f); //保证Y轴从0开始,不然会上移一点 leftAxis.setAxisMinimum(0f); rightAxis.setAxisMinimum(0f); } /** * 初始化曲线 每一个LineDataSet代表一条线 * * @param lineDataSet * @param color * @param mode 折线图是否填充 */ private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode) { lineDataSet.setColor(color); lineDataSet.setCircleColor(color); lineDataSet.setLineWidth(1f); lineDataSet.setCircleRadius(3f); //设置曲线值的圆点是实心还是空心 lineDataSet.setDrawCircleHole(false); lineDataSet.setValueTextSize(9f); //设置折线图填充 lineDataSet.setDrawFilled(mode); lineDataSet.setFormLineWidth(1f); lineDataSet.setFormSize(15.f); //线模式为圆滑曲线(默认折线) lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); } /** * 展示折线图(一条) * * @param xAxisValues * @param yAxisValues * @param label * @param color */ public void showLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) { initLineChart(); ArrayList<Entry> entries = new ArrayList<>(); for (int i = 0; i < xAxisValues.size(); i++) { entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i))); } // 每一个LineDataSet代表一条线 LineDataSet lineDataSet = new LineDataSet(entries, label); initLineDataSet(lineDataSet, color, true); ArrayList<ILineDataSet> dataSets = new ArrayList<>(); dataSets.add(lineDataSet); LineData data = new LineData(dataSets); //设置X轴的刻度数 xAxis.setLabelCount(xAxisValues.size(), true); lineChart.setData(data); } /** * 展示线性图(多条) * * @param xAxisValues * @param yAxisValues 多条曲线Y轴数据集合的集合 * @param labels * @param colours */ public void showLineChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) { initLineChart(); ArrayList<ILineDataSet> dataSets = new ArrayList<>(); for (int i = 0; i < yAxisValues.size(); i++) { ArrayList<Entry> entries = new ArrayList<>(); for (int j = 0; j < yAxisValues.get(i).size(); j++) { if (j >= xAxisValues.size()) { j = xAxisValues.size() - 1; } entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j))); } LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i)); initLineDataSet(lineDataSet, colours.get(i), false); dataSets.add(lineDataSet); } LineData data = new LineData(dataSets); xAxis.setLabelCount(xAxisValues.size(), true); lineChart.setData(data); } /** * 设置Y轴值 * * @param max * @param min * @param labelCount */ public void setYAxis(float max, float min, int labelCount) { if (max < min) { return; } leftAxis.setAxisMaximum(max); leftAxis.setAxisMinimum(min); leftAxis.setLabelCount(labelCount, false); rightAxis.setAxisMaximum(max); rightAxis.setAxisMinimum(min); rightAxis.setLabelCount(labelCount, false); lineChart.invalidate(); } /** * 设置X轴的值 * * @param max * @param min * @param labelCount */ public void setXAxis(float max, float min, int labelCount) { xAxis.setAxisMaximum(max); xAxis.setAxisMinimum(min); xAxis.setLabelCount(labelCount, true); lineChart.invalidate(); } /** * 设置高限制线 * * @param high * @param name */ public void setHightLimitLine(float high, String name, int color) { if (name == null) { name = "高限制线"; } LimitLine hightLimit = new LimitLine(high, name); hightLimit.setLineWidth(2f); hightLimit.setTextSize(10f); hightLimit.setLineColor(color); hightLimit.setTextColor(color); leftAxis.addLimitLine(hightLimit); lineChart.invalidate(); } /** * 设置低限制线 * * @param low * @param name */ public void setLowLimitLine(int low, String name) { if (name == null) { name = "低限制线"; } LimitLine hightLimit = new LimitLine(low, name); hightLimit.setLineWidth(4f); hightLimit.setTextSize(10f); leftAxis.addLimitLine(hightLimit); lineChart.invalidate(); } /** * 设置描述信息 * * @param str */ public void setDescription(String str) { Description description = new Description(); description.setText(str); lineChart.setDescription(description); lineChart.invalidate(); } }
XML中
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.github.mikephil.charting.charts.LineChart android:id="@+id/line_chart1" android:layout_width="match_parent" android:layout_height="380dp"/> <com.github.mikephil.charting.charts.LineChart android:id="@+id/line_chart2" android:layout_width="match_parent" android:layout_height="380dp"/> </LinearLayout> </ScrollView>
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_line_chart); LineChart lineChart1 = (LineChart) findViewById(R.id.line_chart1); LineChart lineChart2 = (LineChart) findViewById(R.id.line_chart2); LineChartManager lineChartManager1 = new LineChartManager(lineChart1); LineChartManager lineChartManager2 = new LineChartManager(lineChart2); //设置x轴的数据 ArrayList<Float> xValues = new ArrayList<>(); for (int i = 0; i <= 10; i++) { xValues.add((float) i); } //设置y轴的数据() List<List<Float>> yValues = new ArrayList<>(); for (int i = 0; i < 4; i++) { List<Float> yValue = new ArrayList<>(); for (int j = 0; j <= 10; j++) { yValue.add((float) (Math.random() * 80)); } yValues.add(yValue); } //颜色集合 List<Integer> colours = new ArrayList<>(); colours.add(Color.GREEN); colours.add(Color.BLUE); colours.add(Color.RED); colours.add(Color.CYAN); //线的名字集合 List<String> names = new ArrayList<>(); names.add("折线一"); names.add("折线二"); names.add("折线三"); names.add("折线四"); //创建多条折线的图表 lineChartManager1.showLineChart(xValues, yValues.get(0), names.get(1), colours.get(3)); lineChartManager1.setDescription("温度"); lineChartManager1.setYAxis(100, 0, 11); lineChartManager1.setHightLimitLine(70,"高温报警",Color.RED); lineChartManager2.showLineChart(xValues, yValues, names, colours); lineChartManager2.setYAxis(100, 0, 11); lineChartManager2.setDescription("温度"); }
三.使用中遇到的一些问题
X轴的刻度数量设置:
xAxis.setLabelCount(xAxisValues.size(), true);
//X轴设置显示位置在底部 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//折线图例 标签 设置 Legend legend = lineChart.getLegend(); //形状 legend.setForm(Legend.LegendForm.LINE); legend.setTextSize(11f); //显示位置 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); legend.setDrawInside(false);
//线模式为圆滑曲线(默认折线) lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
//设置圆心半径 lineDataSet.setCircleRadius(3f); //设置曲线值的圆点是实心还是空心 lineDataSet.setDrawCircleHole(false);
//保证Y轴从0开始,不然会上移一点 leftAxis.setAxisMinimum(0f); rightAxis.setAxisMinimum(0f);
lineDataSet.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { int IValue = (int) value; return String.valueOf(IValue); } });