Android图表工具 MPAndroidChart
源码:https://github.com/PhilJay/MPAndroidChart 下载:https://github.com/PhilJay/MPAndroidChart/releases 教程:Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3.0)MPAndroidChart折线图/柱状图/饼形图的使用Android图表(最新版)----柱状图和饼状图 在buile.gradle(app)中引用
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'//图表
我自己总结的工具类如下
1、饼图工具类
import android.graphics.Color;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.formatter.PercentFormatter;
import java.util.List;
/**
* Created by Yuan on 2020/8/18 15:17.
* 包名: com.example.mywuye.others
* 类说明:饼图工具类
*/
public class PieChartManager {
public PieChart pieChart;
public PieChartManager(PieChart pieChart,String text) {
this.pieChart = pieChart;
initPieChart( text);
}
//初始化
private void initPieChart(String text) {
//饼状图
pieChart.setUsePercentValues(true);//设置value是否用显示百分数,默认为false
pieChart.getDescription().setEnabled(false);//设置描述
pieChart.setExtraOffsets(10f, 15f, 10f, 15f);//设置饼状图距离上下左右的偏移量
pieChart.setDragDecelerationFrictionCoef(0.45f);//设置阻尼系数,范围在[0,1]之间,越小饼状图转动越困难
//设置中间文字
pieChart.setDrawCenterText(false);//是否绘制中间的文字
pieChart.setCenterText(text);//设置饼中间标题
pieChart.setCenterTextSizePixels(10);
pieChart.setCenterTextColor(Color.parseColor("#292F4C")); //中间问题的颜色
pieChart.setCenterTextSize(15f);//中间文字的大小px
// pieChart.setCenterTextTypeface(mTfLight); //设置PieChart内部圆文字的字体样式
pieChart.setNoDataText("暂无数据");// 如果没有数据的时候,会显示这个,类似ListView的EmptyView
//内部圆环
pieChart.setDrawHoleEnabled(true);//是否绘制饼状图中间的圆
pieChart.setHoleColor(Color.WHITE);//饼状图中间的圆的绘制颜色
pieChart.setTransparentCircleColor(Color.WHITE);//设置圆环的颜色
pieChart.setTransparentCircleAlpha(220);//设置圆环的透明度[0,255]数值越小越透明
pieChart.setHoleRadius(55f);//饼状图中间的圆的半径大小
pieChart.setTransparentCircleRadius(5f);//设置圆环的半径值
pieChart.setRotationAngle(0f);//设置饼状图旋转的角度
// 触摸旋转
pieChart.setRotationEnabled(true);
pieChart.setHighlightPerTapEnabled(true);//设置旋转的时候点中的tab是否高亮(默认为true)
// 输入标签样式
pieChart.setDrawEntryLabels(true);//是否绘制饼上的字体(是否显示每个部分的文字描述),false只显示百分比,
pieChart.setEntryLabelColor(Color.BLACK);//描述文字的颜色
// pieChart.setEntryLabelTypeface(mTfRegular); //描述文字的样式
pieChart.setEntryLabelTextSize(10f);//描述文字的大小
pieChart.animateX(50);
//设置每个tab比例块的显示位置(饼图外字体)
Legend l = pieChart.getLegend();//设置比例块 饼图外数据的位置
l.setVerticalAlignment(Legend.LegendVerticalAlignment.CENTER);//图例竖直居中
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);//图例水平右对齐
l.setOrientation(Legend.LegendOrientation.VERTICAL) ;//设置图例垂直排列
l.setDrawInside(false); //
l.setXEntrySpace(5f);//设置tab比例块之间X轴方向上的空白间距值(水平排列时)
l.setYEntrySpace(5f);//设置tab比例块之间Y轴方向上的空白间距值(垂直排列时)
l.setYOffset(0f);//设置比例块Y轴偏移量
l.setFormSize(10f);//设置比例块大小
l.setForm(Legend.LegendForm.CIRCLE);//设置图例形状,默认为方块SQUARE,CIRCLE圆角
l.setFormToTextSpace(10f); //设置每个图例实体中标签和形状之间的间距
l.setTextSize(12f);//设置比例块字体大小
l.setTextColor(Color.parseColor("#000000"));
l.setEnabled(true);//设置是否启用比例块,默认启用
l.setWordWrapEnabled(false);//设置比例块换行...
/**
* 饼子的样式(一块压一块)
*/
// boolean toSet = !pieChart.isDrawRoundedSlicesEnabled() || !pieChart.isDrawHoleEnabled();
// pieChart.setDrawRoundedSlices(toSet);
// if (toSet && !pieChart.isDrawHoleEnabled()) {
// pieChart.setDrawHoleEnabled(true);
// }
// if (toSet && pieChart.isDrawSlicesUnderHoleEnabled()) {
// pieChart.setDrawSlicesUnderHole(false);
// }
}
/*/**
* 创建日期:2020/8/18 16:14
* @author Yuan
* 方法名称: showRingPieChart
* 方法说明:
* @param entries
* @param colors
* @return:void
*/
public void showRingPieChart(List<PieEntry> entries, List<Integer> colors) {
PieDataSet dataSet = new PieDataSet(entries, "");
dataSet.setSliceSpace(0f);//饼子间距
dataSet.setSelectionShift(3f);//点击某个饼子伸长。设置饼状Item被选中时变化的距离
dataSet.setColors(colors); //为DataSet中的数据匹配上颜色集(饼图Item颜色)
//设置折线
dataSet.setValueLinePart1OffsetPercentage(80.f);
//设置线的长度
dataSet.setValueLinePart1Length(0.5f);
dataSet.setValueLinePart2Length(0.5f);
//设置文字和数据图外显示
dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
PieData data = new PieData(dataSet);
data.setValueFormatter(new PercentFormatter()); //设置所有DataSet内数据实体(百分比)的文本字体格式
data.setValueTextSize(13f);//设置所有DataSet内数据实体(百分比)的文本字体大小
data.setValueTextColor(Color.BLACK); //设置所有DataSet内数据实体(百分比)的文本颜色
// data.setValueTypeface(mTfLight); //设置所有DataSet内数据实体(百分比)的文本字体样式
pieChart.setData(data);//添加数据
pieChart.highlightValues(null);// 撤销所有的亮点
//刷新
pieChart.invalidate();
}
}
2、折线图工具类
package com.example.mywuye.others;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Handler;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Description;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Yuan on 2020/8/18 17:04.
* 包名: com.example.mywuye.others
* 类说明:折线图
*/
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(boolean legendShow) {
lineChart.setDrawGridBackground(false);
lineChart.setDrawBorders(false); //显示边界
lineChart.animateX(1000);//设置动画效果
lineChart.setTouchEnabled(true); // 所有触摸事件,默认true
lineChart.setDragEnabled(false); // 可拖动,默认true
lineChart.setScaleEnabled(false); // 两个轴上的缩放,X,Y分别默认为true
lineChart.setScaleXEnabled(false); // X轴上的缩放,默认true
lineChart.setScaleYEnabled(false); // Y轴上的缩放,默认true
lineChart.setPinchZoom(false); // X,Y轴同时缩放,false则X,Y轴单独缩放,默认false
lineChart.setDoubleTapToZoomEnabled(false); // 双击缩放,默认true
lineChart.setDragDecelerationEnabled(true); // 抬起手指,继续滑动,默认true
lineChart.setExtraOffsets(5,25,10,0); //设置边距
//折线图例 标签 设置
Legend legend = lineChart.getLegend();
if (legendShow) {//图例展示
legend.setDrawInside(false);//不绘制在图形内部
legend.setTextSize(38f);//设置文字大小
legend.setTextColor(Color.BLUE);//设置文字颜色
legend.setTypeface(Typeface.DEFAULT_BOLD);//文字加粗
legend.setFormSize(50f);//设置图例的大小
legend.setFormToTextSpace(20f);//设置图例距离文字的距离
legend.setForm(Legend.LegendForm.LINE);//设置图例类型为线条
legend.setYOffset(20f);//距离底部20dp
//设置图例显示位置下、中对齐
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
} else {
legend.setForm(Legend.LegendForm.NONE);
// legend.setEnabled(false);/*是否启用,默认启用*/
}
}
/**
* 设置Y轴值
*
* @param max
* @param min
* @param labelCount
*/
public void setYAxis(float max, float min, int labelCount) {
if (max < min) {
return;
}
//保证Y轴从0开始,不然会上移一点
leftAxis.setAxisMinimum(0f);
leftAxis.setDrawAxisLine(false); // 显示数字但不显示线
leftAxis.setTextSize(10f);//设置文本大小
leftAxis.setTextColor(Color.parseColor("#609ee9"));
leftAxis.setDrawGridLines(true);
leftAxis.setDrawAxisLine(true);
leftAxis.setAxisLineWidth(1);
leftAxis.setAxisLineColor(Color.parseColor("#609ee9"));
leftAxis.setXOffset(5);//设置15dp的距离
leftAxis.setDrawGridLines(true);//是否绘制网格线(横线)
// 设置网格为虚线
// leftAxis.enableGridDashedLine(10f, 10f, 0f);
leftAxis.setGridColor(Color.parseColor("#D4DFF5"));
// 线跟数据都不显示
leftAxis.setAxisMaximum(max);//设置最大值
leftAxis.setAxisMinimum(min);//设置最小值
leftAxis.setLabelCount(labelCount, false);//显示7个
rightAxis.setEnabled(false); //右侧Y轴不显示
rightAxis.setAxisMinimum(0f);
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.setPosition(XAxis.XAxisPosition.BOTTOM); //X轴设置显示位置在底部
xAxis.setAxisMinimum(0f);
xAxis.setGranularity(1f);//间隔1
xAxis.setDrawGridLines(false);//不绘制网格线,竖向的
xAxis.setGridColor(Color.parseColor("#d8d8d8"));
xAxis.setAvoidFirstLastClipping(true); //设置最后和第一个标签不超出x轴
xAxis.setAxisLineWidth(1.0f);// 设置线的宽度
xAxis.setAxisLineColor(Color.parseColor("#609ee9"));
xAxis.setAxisMaximum(max);//设置最大值
xAxis.setAxisMinimum(min);//设置最小值,小技巧,通过设置Axis的最小值设置为负值可以改变距离与Y轴的距离
xAxis.setLabelCount(labelCount, true);
xAxis.setTextColor(Color.parseColor("#609ee9"));//设置字体颜色
xAxis.setTextSize(10f);//设置字体大小
xAxis.setLabelRotationAngle(0); //文字倾斜度
// xAxis.setLabelCount(xAxisValues.size(), false); //设置X轴的刻度数
lineChart.invalidate();
}
/**
* 设置描述信息
* @param str
*/
public void setDescription(boolean use,String str,float textsize,int textcolor,float x,float y) {
Description description = new Description();
description.setText(str);//设置文本
description.setTextSize(textsize); //设置文本大小,最小6f,最大16f。
// description.setTypeface(Typeface.DEFAULT_BOLD);//设置文本样式加粗显示
description.setTextColor(Color.BLACK);//设置文本颜色
description.setPosition(x,y);//设置文本的位置
lineChart.setDescription(description);//添加给LineChart
description.setEnabled(use);/*不启用*/
lineChart.invalidate();
}
/**
* 初始化曲线 每一个LineDataSet代表一条线
*
* @param lineDataSet
* @param color
* @param mode 折线图是否填充
*/
private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode,int fillcolor) {
lineDataSet.setCubicIntensity(0.2f);//设置曲线的Mode强度,0-1
lineDataSet.setColor(color);//设置折线的颜色,有三个构造方法Color.parseColor("#f7b851")
lineDataSet.setCircleColor(color);//一次性设置所有圆点的颜色
// lineDataSet.setCircleColors(Color.RED,Color.BLACK,Color.GREEN);//依次设置每个圆点的颜色
lineDataSet.setLineWidth(2f);//设置折线的宽度
lineDataSet.setCircleRadius(3f);//设置圆点半径大小
lineDataSet.setDrawCircleHole(true); //设置曲线值的圆点是否是空心
lineDataSet.setValueTextSize(9f);
lineDataSet.setHighLightColor(color); //高亮的线的颜色
// lineDataSet.setHighlightEnabled(false);
lineDataSet.setDrawFilled(mode);//是否绘制折线下方的填充 true,默认false
lineDataSet.setFillColor(fillcolor); //设置填充颜色
lineDataSet.setFormLineWidth(2f);//只有lineDataSet.setForm(Legend.LegendForm.LINE);时才有作用 这里我们设置的是圆所以这句代码直接注释
// lineDataSet.setFormSize(15.f);
lineDataSet.setMode(LineDataSet.Mode.LINEAR); //设置折线类型,线模式为圆滑曲线(默认折线),CUBIC_BEZIER为贝塞尔曲线
lineDataSet.setDrawValues(true); // 不显示具体值
lineDataSet.setDrawCircles(true);//是否绘制圆点,若为false则表示只有折线
}
/**
* 跟showLineCharDouble配对
* @param lineDataSet
* @param color
* @param mode
*/
private void initLineCusDataSet(LineDataSet lineDataSet, int color, boolean mode,int fillcolor) {
initLineDataSet(lineDataSet, color, mode,fillcolor);
lineDataSet.setDrawValues(false);
lineDataSet.setDrawCircles(false);
}
/**
* 展示折线图(一条)
*
* @param xAxisValues
* @param yAxisValues
* @param label
*
*/
public void showLineChart(float[] xAxisValues, float[] yAxisValues, String label,int color,boolean mode,int fillcolor) {
initLineChart(false);
ArrayList<Entry> entries = new ArrayList<>();
for (int i = 0; i < xAxisValues.length; i++) {
entries.add(new Entry(xAxisValues[i], yAxisValues[i]));
}
// 每一个LineDataSet代表一条线
LineDataSet lineDataSet = new LineDataSet(entries, label);
initLineDataSet(lineDataSet,color,true,fillcolor);
LineData data = new LineData(lineDataSet);
lineChart.setData(data);
}
/**
* 展示折线图(一条)
*
* @param xAxisValues
* @param yAxisValues
* @param label
* @param color
*/
public void showAirLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color,int fillcolor) {
initLineChart(false);
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,fillcolor);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(lineDataSet);
LineData data = new LineData(dataSets);
//设置X轴的刻度数
// xAxis.setLabelCount(xAxisValues.size(), false);
xAxis.setTextColor(Color.parseColor("#a1a1a1"));
//文字倾斜度
// xAxis.setLabelRotationAngle(-45);
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,List<Integer> fillcolors) {
initLineChart(true);
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), true,fillcolors.get(i));
lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
dataSets.add(lineDataSet);
}
LineData data = new LineData(dataSets);
xAxis.setLabelCount(xAxisValues.size(), true);
String[] xValues = {"6:00", "9:00", "12:00", "15:00", "18:00"};
// xAxis.setValueFormatter(new XAxisValueFormatter(xValues));
lineChart.setData(data);
}
public class XAxisValueFormatter implements IAxisValueFormatter {
private String[] xValues;
public XAxisValueFormatter(String[] xValues) {
this.xValues = xValues;
}
@Override
public String getFormattedValue(float value, AxisBase axis) {
return xValues[(int) value];
}
}
/**
* 只显示两条 其中一条是影 定制化
*
* @param xAxisValues
* @param yAxisValues 只有两条数据
* @param labels
* @param colours
*/
public void showLineCharDouble(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours,List<Integer> fillcolors) {
initLineChart(true);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
//
for (int i = 0; i < 2; 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));
initLineCusDataSet(lineDataSet, colours.get(i), false,fillcolors.get(i));
// if (i == 1) {
// initLineCusDataSet(lineDataSet, colours.get(i), false);
// } else {
// initLineDataSet(lineDataSet, colours.get(i), false);
// }
dataSets.add(lineDataSet);
}
LineData data = new LineData(dataSets);
xAxis.setLabelCount(xAxisValues.size(), true);
lineChart.setData(data);
}
/**
* 设置高限制线
*
* @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();
}
}
3、使用如下
布局
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/mPieChart"
android:layout_width="match_parent"
android:layout_height="300dp" />
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="300dp"/>
java代码
public class MonitorFragment extends BaseFragment{
private View view;
private PieChart mPieChart;
private ArrayList<Integer> colors;
private ArrayList<PieEntry> entries;
private PieChartManager pieChartManager;
private LineChart lineChart, kllLineChart, cllLineChart;
private LineChartManager lineChartManager, cllLineChartManager, kllLineChartManager;
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_monitor, container, false);
return view;
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
init();
setPieChartData();
setLinechart();
}
private void init() {
mPieChart = view.findViewById(R.id.mPieChart);
lineChart = view.findViewById(R.id.lineChart);
pieChartManager = new PieChartManager(mPieChart, "");
lineChartManager = new LineChartManager(lineChart);
kllLineChartManager = new LineChartManager(kllLineChart);
cllLineChartManager = new LineChartManager(cllLineChart);
LinearLayout toalarm=view.findViewById(R.id.toalarm);
toalarm.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(getContext(), AlarmMianActivity.class));
}
});
str = (String) sh.get(getContext(), "str", "");
}
//设置饼图
private void setPieChartData() {
colors = new ArrayList<Integer>();
colors.add(Color.parseColor("#6AE5B0"));
colors.add(Color.parseColor("#FD754B"));
colors.add(Color.parseColor("#845FFD"));
colors.add(Color.parseColor("#24C4D4"));
colors.add(Color.parseColor("#FFB03F"));
//模拟数据
entries = new ArrayList<PieEntry>();
entries.add(new PieEntry(22, "及格"));
entries.add(new PieEntry(0, "不及格"));
entries.add(new PieEntry(0, "优秀"));
entries.add(new PieEntry(2, "良好"));
entries.add(new PieEntry(0, "其他"));
pieChartManager.showRingPieChart(entries, colors);
}
//设置折线图
private void setLinechart() {
/*设置描述*/
// 获取屏幕中间x 轴的像素坐标
WindowManager wm = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
float x = dm.widthPixels / 2;
lineChartManager.setDescription(true, "kwh", 12f, Color.BLACK, x - 470, 40);
/*设置xy轴*/
lineChartManager.setYAxis(20, 0, 5);
lineChartManager.setXAxis(20, 0, 10);
//赋值
List<Entry> entriesnh = new ArrayList<>();
float[] data = new float[]{14f, 15f, 16f, 17f, 16f, 16f};
float[] xdata = new float[]{0, 2, 5, 8, 15, 18};
lineChartManager.showLineChart(xdata, data, "", Color.parseColor("#f7b851"), true, Color.parseColor("#f7b851"));
}
}