Android 平台绘图的开源库有好几个,最成熟最出名的就属于 MPAndroidChart 了,他能帮我们实现曲线图、折线图、柱状图、饼状图,分布图等等。同时还可以实现混合图表。
GitHub 地址:https://github.com/PhilJay/MPAndroidChart
- 曲线图
- 填充曲线图,可以设置纯色和渐变色
- 混合图表
- 柱状图
- 支持x,y轴缩放
- 支持拖拽
- 支持手指滑动
- 支持高亮显示
- 支持保存图表到文件中
- 支持从文件(txt)中读取数据
- 预先定义颜色模板
- 自动生成标注
- 支持自定义x,y轴的显示标签
- 支持x,y轴动画
- 支持x,y轴设置最大值和附加信息
- 支持自定义字体,颜色,背景,手势,虚线等
1. 在工程的 build.gradle 中添加如下:
allprojects {
repositories {
...
maven { url "https://www.jitpack.io" }
}
}
2. 在 app/build.gradle 添加如下依赖:
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
折线图(LineChart)
1. 管理类(LineChartManager.java)
public class LineChartManager {
private LineChart lineChart;
private YAxis leftAxis;
private YAxis rightAxis;
private XAxis xAxis;
private LineData lineData;
private LineDataSet lineDataSet;
private List lineDataSets = new ArrayList();
private SimpleDateFormat df = new SimpleDateFormat("HH:mm:ss");//设置日期格式
private List timeList = new ArrayList(); //存储x轴的时间
//一条曲线
public LineChartManager(LineChart mLineChart, String name, int color) {
this.lineChart = mLineChart;
leftAxis = lineChart.getAxisLeft();
rightAxis = lineChart.getAxisRight();
xAxis = lineChart.getXAxis();
initLineChart();
initLineDataSet(name, color);
}
//多条曲线
public LineChartManager(LineChart mLineChart, List names, List colors) {
this.lineChart = mLineChart;
leftAxis = lineChart.getAxisLeft();
rightAxis = lineChart.getAxisRight();
xAxis = lineChart.getXAxis();
initLineChart();
initLineDataSet(names, colors);
}
/**
* 初始化LineChar
*/
private void initLineChart() {
lineChart.setDrawGridBackground(false);
//显示边界
lineChart.setDrawBorders(true);
//折线图例 标签 设置
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);
//X轴设置显示位置在底部
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setGranularity(1f);
xAxis.setLabelCount(10);
//保证Y轴从0开始,不然会上移一点
leftAxis.setAxisMinimum(0f);
rightAxis.setAxisMinimum(0f);
}
/**
* 初始化折线(一条线)
*
* @param name
* @param color
*/
private void initLineDataSet(String name, int color) {
lineDataSet = new LineDataSet(null, name);
lineDataSet.setLineWidth(1.5f);
lineDataSet.setCircleRadius(1.5f);
lineDataSet.setColor(color);
lineDataSet.setCircleColor(color);
lineDataSet.setHighLightColor(color);
//设置曲线填充
lineDataSet.setDrawFilled(false);
lineDataSet.setDrawValues(false);
lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lineDataSet.setValueTextSize(10f);
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
//添加一个空的 LineData
lineData = new LineData();
lineChart.setData(lineData);
lineChart.invalidate();
}
/**
* 初始化折线(多条线)
*
* @param names
* @param colors
*/
private void initLineDataSet(List names, List colors) {
for (int i = 0; i 11) {
timeList.clear();
}
timeList.add(df.format(System.currentTimeMillis()));
Entry entry = new Entry(lineDataSet.getEntryCount(), number);
lineData.addEntry(entry, 0);
//通知数据已经改变
lineData.notifyDataChanged();
lineChart.notifyDataSetChanged();
//设置在曲线图中显示的最大数量
lineChart.setVisibleXRangeMaximum(10);
//移到某个位置
lineChart.moveViewToX(lineData.getEntryCount() - 5);
}
/**
* 动态添加数据(多条折线图)
*
* @param numbers
*/
public void addEntry(List numbers) {
if (lineDataSets.get(0).getEntryCount() == 0) {
lineData = new LineData(lineDataSets);
lineChart.setData(lineData);
}
if (timeList.size() > 100) {
timeList.clear();
}
timeList.add(df.format(System.currentTimeMillis()));
for (int i = 0; i
3. 逻辑代码
public class MainActivity extends AppCompatActivity {
private LineChart mLineChart;
private LineChartManager mChartManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
mChartManager = new LineChartManager(mLineChart,"sensors",Color.BLACK);
}
private void initView() {
mLineChart = findViewById(R.id.line_chart);
}
public void addEntry(View view) {
mChartManager.addEntry((int)(Math.random() * 100));
}
}
饼图
1. 效果图
2. 布局文件
3. 代码
public class MainActivity extends AppCompatActivity {
private PieChart mPieChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initPieChart(mPieChart);
}
private void initPieChart(PieChart pieChart) {
List strings = new ArrayList();
strings.add(new PieEntry(30f,"男生"));
strings.add(new PieEntry(70f,"女生"));
PieDataSet dataSet = new PieDataSet(strings,"");
ArrayList colors = new ArrayList();
colors.add(Color.RED);
colors.add(Color.BLUE);
dataSet.setColors(colors);
PieData pieData = new PieData(dataSet);
pieData.setDrawValues(true);
pieData.setValueFormatter(new PercentFormatter(pieChart));
pieData.setValueTextSize(12f);
pieData.setValueTextColor(Color.WHITE);
Description description = new Description();
description.setText("");
pieChart.setDescription(description);
pieChart.setHoleRadius(0f);
pieChart.setTransparentCircleRadius(0f);
pieChart.setUsePercentValues(true);
pieChart.setData(pieData);
pieChart.invalidate();
}
private void initView() {
mPieChart = findViewById(R.id.pie_chart);
}
}
柱状图
1. 效果图
2. 布局文件
3. 代码
public class MainActivity extends AppCompatActivity {
private BarChart mBarChart;
private List mBarEntries;
private BarData mBarData;
private BarDataSet mBarDataSet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initBarEntries();
initBarData();
}
private void initView() {
mBarChart = findViewById(R.id.bar_chart);
mBarChart.setNoDataText("正在初始化...");
}
private void initBarEntries() {
BarEntry barEntry1 = new BarEntry(0f, 30f);
BarEntry barEntry2 = new BarEntry(1f, 40f);
BarEntry barEntry3 = new BarEntry(2f, 50f);
BarEntry barEntry4 = new BarEntry(3f, 60f);
BarEntry barEntry5 = new BarEntry(4f, 70f);
mBarEntries = new ArrayList();
mBarEntries.add(barEntry1);
mBarEntries.add(barEntry2);
mBarEntries.add(barEntry3);
mBarEntries.add(barEntry4);
mBarEntries.add(barEntry5);
}
private void initBarData() {
mBarDataSet = new BarDataSet(mBarEntries,"sleep");
mBarData = new BarData(mBarDataSet);
// mBarDataSet.setColors(colors); 给柱状图设置颜色
initX(mBarChart);
initY(mBarChart);
Description desc = new Description();
desc.setText("");
mBarChart.setDescription(desc);
mBarChart.setData(mBarData);
mBarChart.invalidate();
}
private void initX(BarChart barChart) {
final String[] weeks = {"周一","周二","周三","周四","周五"};
XAxis xAxis = barChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return weeks[(int)value];
}
});
barChart.getLegend().setEnabled(false);
xAxis.setLabelCount(weeks.length,false);
}
private void initY(BarChart barChart) {
barChart.getAxisLeft().setDrawZeroLine(true);
//去掉左侧Y轴刻度
barChart.getAxisLeft().setDrawLabels(false);
//去掉左侧Y轴
barChart.getAxisLeft().setDrawAxisLine(false);
//去掉中间竖线
barChart.getXAxis().setDrawGridLines(false);
//去掉中间横线
barChart.getAxisLeft().setDrawGridLines(false);
}
}