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中
X轴的刻度数量设置:
相关文章:
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); } });
相关文章推荐
- Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)
- Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据^a!HsMa0cWDc
- Android图表控件MPAndroidChart之曲线图的实现
- Android-LineChart显示多条曲线
- Android图表控件MPAndroidChart——源码修改实现曲线图X轴直尺刻度样式
- chart图表控件的一些使用
- 使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
- 使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
- Echarts图表控件使用总结1(Line,Bar)
- Android的图表世界–如何使用MPAndroidChart
- Android制作曲线、柱状图、饼形等图表——使用AChartEngine
- FusionChart图表控件使用说明
- Android制作曲线、柱状图、饼形等图表——使用AChartEngine
- Echarts图表控件使用总结2(Line,Bar)—问题篇
- Wpf/Wp/Silverlight-Chart图表控件:柱状图、饼状图等使用汇总
- 统计图表之MPAndroidChart曲线图解说
- 使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
- 使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
- 流程图控件FlowChart.NET使用教程:设置图表样式和主题
- Android中图表AChartEngine学习使用与例子