前言:
MpAndroidChart是一个开源图表库，它能实现多种常见的图表类型，如：折线图，饼图，堆叠图等。此外它还提供了一些对图表的操作功能，如：拖拽，缩放，显示标签等。这个第三方库能满足一般性图表开发需求。
关于使用：
1:引入依赖：
为目前使用的是MpAndroidChart-3.03版本，更新的版本可以去官网上找一找。
https://github.com/PhilJay/MPAndroidChart
需要在配置文件的allprojects中加入maven仓库
allprojects {
repositories {
google()
jcenter()
//添加本行
maven{url"https://jitpack.io"}
}
}
然后引入依赖即可
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
2:实现
-
饼图 PieChart
PieChart.png
布局：
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
具体实现：
public class PieChartFragment extends Fragment {
public PieChartFragment() {
// Required empty public constructor
}
private PieChart pieChart;
private List<PieEntry> entries ;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_pie_chart, container, false);
pieChart = view.findViewById(R.id.pieChart);
//添加数据
entries = new ArrayList<>();
entries.add(new PieEntry(12.0f,"未违章"));
entries.add(new PieEntry(88.0f,"违章"));
pieChart.setDrawHoleEnabled(true); //设置中心孔洞
//设置描述内容
String descriptionStr = "平台上有违章车辆和没违章车辆的占比统计";
Description description = new Description();
description.setText(descriptionStr);
//设置图表边距，间接改变图表大小
pieChart.setExtraLeftOffset(0f);
pieChart.setExtraTopOffset(32f);
pieChart.setExtraRightOffset(0f);
pieChart.setExtraBottomOffset(32f);
PieDataSet pieDataSet = new PieDataSet(entries,"违章情况");
pieDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
pieDataSet.setValueLinePart1OffsetPercentage(80f);
pieDataSet.setSliceSpace(4f);
pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE); //设置连接线在图的外侧
PieData pieData = new PieData(pieDataSet);
pieData.setDrawValues(true);
pieData.setValueFormatter(new PercentFormatter());
pieChart.setData(pieData);
pieChart.setDescription(description); //设置标签
return view;
}
}
-
柱状图 BarChart
它可以同时写多组数据。并且可以实现堆叠效果也就是堆叠图。
image.png
布局文件:
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/barChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
具体实现:
public class BarChartFragment extends Fragment {
public BarChartFragment() {
// Required empty public constructor
}
private BarChart barChart;
private List<BarEntry> entryList1 ;
private List<BarEntry> entryList2 ;
private List<BarEntry> entryList3 ;
private List<IBarDataSet> dataSetList ;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view =inflater.inflate(R.layout.fragment_bar_chart, container, false);
barChart = view.findViewById(R.id.barChart);
entryList1 = new ArrayList<>();
entryList2 = new ArrayList<>();
entryList3 = new ArrayList<>();
dataSetList = new ArrayList<>();
//表数据
entryList1.add(new BarEntry(0f,1000f));
entryList1.add(new BarEntry(3f,1100f));
entryList1.add(new BarEntry(6f,9000f));
entryList2.add(new BarEntry(1f,2000f));
entryList2.add(new BarEntry(4f,15000f));
entryList2.add(new BarEntry(7f,10500f));
entryList3.add(new BarEntry(2f,1000f));
entryList3.add(new BarEntry(5f,10900f));
entryList3.add(new BarEntry(8f,19000f));
BarDataSet barDataSet = new BarDataSet(entryList1,"保养支出");
BarDataSet barDataSet2 = new BarDataSet(entryList2,"维修支出");
BarDataSet barDataSet3 = new BarDataSet(entryList3,"保险支出");
barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
barDataSet2.setColors(ColorTemplate.JOYFUL_COLORS);
barDataSet3.setColors(ColorTemplate.JOYFUL_COLORS);
dataSetList.add(barDataSet);
dataSetList.add(barDataSet2);
dataSetList.add(barDataSet3);
BarData barData = new BarData(dataSetList);
barData.setBarWidth(0.9f); //设置柱体宽度，这样柱与柱之间间隔就是0.1
barChart.setData(barData);
barChart.setFitBars(true);
barChart.invalidate(); //刷新
return view;
}
}
-
堆叠图
它属于BarChart，但是由于数据发生变化他的显示也发生了变化。
image.png
布局文件:
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/stackingBarChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
具体实现:
public class StackingBarChartFragment extends Fragment {
public StackingBarChartFragment() {
// Required empty public constructor
}
private BarChart barChart;
private List<BarEntry> entryList ;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_stacking_bar_chart, container, false);
barChart = view.findViewById(R.id.stackingBarChart);
entryList = new ArrayList<>();
entryList.add(new BarEntry(1,new float[]{123,456}));
entryList.add(new BarEntry(2,new float[]{99,228}));
entryList.add(new BarEntry(3,new float[]{150,396}));
BarDataSet barDataSet = new BarDataSet(entryList,"京东");
barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
barChart.setDrawValueAboveBar(false);
barChart.setEnabled(true);
BarData barData = new BarData(barDataSet);
barData.setBarWidth(0.9f); //设置柱体宽度，这样柱与柱之间间隔就是0.1
barChart.setData(barData);
return view;
}
}
-
横向柱状图 HorizontalBarChart
image.png
布局文件：
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="@+id/horizontalBarchart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
具体实现:
public class HorizontalBarChartFragment extends Fragment {
public HorizontalBarChartFragment() {
// Required empty public constructor
}
private HorizontalBarChart barChart;
private List<BarEntry> entryList ;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_horizontal_bar_chart, container, false);
barChart = view.findViewById(R.id.horizontalBarchart);
entryList = new ArrayList<>();
entryList.add(new BarEntry(1,23));
entryList.add(new BarEntry(2,17));
entryList.add(new BarEntry(3,29));
entryList.add(new BarEntry(4,20));
barChart.setEnabled(true);
BarDataSet barDataSet = new BarDataSet(entryList,"成本");
barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
BarData barData = new BarData(barDataSet);
barData.setBarWidth(0.9f);
barChart.setData(barData);
return view;
}
}
-
折线图 LineChart
也可以写多组数据,实现两条或者多条折线同时出现
image.png
布局文件:
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
具体实现:
public class LineChartFragment extends Fragment {
public LineChartFragment() {
// Required empty public constructor
}
private LineChart lineChart;
private List<Entry> entryList ;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_line_chart, container, false);
lineChart = view.findViewById(R.id.lineChart);
entryList = new ArrayList<>();
entryList.add(new BarEntry(1,10));
entryList.add(new BarEntry(2,11));
entryList.add(new BarEntry(3,9));
lineChart.setEnabled(false);
lineChart.setTouchEnabled(true);
//样式设置
XAxis xAxis = lineChart.getXAxis();
xAxis.setTextSize(10f); //设置x轴字体大小
Description description = new Description(); //隐藏右下角的描述
description.setEnabled(false);
lineChart.setDescription(description);
LineDataSet lineDataSet = new LineDataSet(entryList,"温度");
lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
LineData lineData = new LineData(lineDataSet);
lineChart.setData(lineData);
return view;
}
}
-
雷达图 RadarChart
image.png
布局文件:
<com.github.mikephil.charting.charts.RadarChart
android:id="@+id/radarChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
具体实现:
public class RadarChartFragment extends Fragment {
public RadarChartFragment() {
// Required empty public constructor
}
private RadarChart radarChart;
private List<RadarEntry> entryList;
private List<String> xdata;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_radar_chart, container, false);
radarChart = view.findViewById(R.id.radarChart);
entryList = new ArrayList<>();
xdata = new ArrayList<>();
xdata.add("1");
xdata.add("2");
xdata.add("3");
xdata.add("4");
xdata.add("5");
//设置显示标签
XAxis xAxis = radarChart.getXAxis();
xAxis.setTextSize(20f);
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return xdata.get((int)value % xdata.size());
}
});
//设置雷达图中心为0
YAxis yAxis = radarChart.getYAxis();
yAxis.setLabelCount(5,true);
yAxis.setAxisMinimum(0f);
yAxis.setDrawTopYLabelEntry(false);
yAxis.setTextSize(15f);
radarChart.setDrawWeb(true);
radarChart.setEnabled(false);
entryList.add(new RadarEntry(12));
entryList.add(new RadarEntry(9));
entryList.add(new RadarEntry(11));
entryList.add(new RadarEntry(16));
entryList.add(new RadarEntry(10));
RadarDataSet radarDataSet = new RadarDataSet(entryList,"研发成本");
radarDataSet.setDrawValues(false);
radarDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
RadarData radarData = new RadarData(radarDataSet);
radarChart.setData(radarData);
return view;
}
}
以上共介绍了六种基本图表及使用方法，可以满足大部分的应用.
网友评论