您的位置:首页 > 移动开发 > Android开发

Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)p8qjA6jN9Z3n

2017-07-02 17:21 1571 查看
发现最新的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>
Activity中
@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轴的位置显示
//X轴设置显示位置在底部
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
线条描述Legend的显示位置等相关设置
//折线图例 标签 设置
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轴的起始点并没有挨着X轴
//保证Y轴从0开始,不然会上移一点
leftAxis.setAxisMinimum(0f);
rightAxis.setAxisMinimum(0f);
曲线显示的是float类型,怎样去除小数点呢?可以在设置 曲线 LineDataSet时更改数据类型,显示整数
lineDataSet.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
int IValue = (int) value;
return String.valueOf(IValue);
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: