1、添加依赖

项目目录->app->build.gradle

dependencies {
	implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

在这里插入图片描述

项目目录->app->setting.gradle

dependencyResolutionManagement {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

在这里插入图片描述

2、Chart 类

该类是图表的控件，类似于按键、图片，是从 xml 文件中通过 id 获取到的。

获取/创建

xxxChart chart = (xxxChart) findViewById(R.id.chart);

常用方法

方法名	描述
chart.setDrawBorders(boolean)	是否显示图表边界，true：显示，默认 false
chart.setScaleEnabled(boolean)	是否使能缩放，true：使能，默认 false
chart.setScaleXEnabled(boolean)	是否使能 X 轴方向的缩放，true：使能，默认 false
chart.setScaleYEnabled(boolean)	是否使能 Y 轴方向的缩放，true：使能，默认 false

chart.setExtraRightOffset(float)	设置图表右边边界的偏移（解决 X 轴显示不全问题）
chart.setExtraLeftOffset(float)	设置图表左边边界的偏移（解决 X 轴显示不全问题）
chart.setExtraBottomOffset(float)	设置图表底边边界的偏移
chart.setExtraTopOffset(float)	设置图表顶边边界的偏移

chart.setOnChartValueSelectedListener (OnChartValueSelectedListener)	监听点击图表中的数据事件（详见 10、OnChartValueSelectedListener 接口)）

chart.setData(-Data)	往图表插入一组数据（详见 3、DataSet 类)）

chart.getXAxis()	获取图表的 X 轴
chart.setVisibleXRangeMaximum(float)	设置当前图表中最多在 X 轴坐标线上显示刻度线的总量
chart.getAxisLeft()	获取图表左边的 Y 轴
chart.getAxisRight()	获取图表右边的 Y 轴

chart.getLegend()	获取图表的图例
chart.setDescription()	设置图表标题

chart.animateY(int)	设置播放 Y 轴方向的动画时间（毫秒）
chart.animateX(int)	设置播放 X 轴方向的动画时间（毫秒）
chart.animateXY(int)	设置播放 XY 轴方向的动画时间（毫秒）

chart.notifyDataSetChanged()	让图表知道依赖的数据发生变化时调用,调用后图表会重新计算，在使用动态数据时很有用
chart.invalidate()	这个方法刷新图表将会重新绘制，更改图表后想要生效必须调用

3、DataSet 类

作用

设置展现在图表上的一组数据的一些表现形式。比如说设置折线的颜色、粗细等。

构造函数

xxxDataSet dataSet = new xxxDataSet(List<Entry> yVals, String label);

yVals：需要进行展示的一组数据
label：该组数据的名字

yVals list 数组由来：

float[] data;

// 填充数据
for(int i = 0; i < data.length; i++) {
    
    
    // 两个数字对应的分别是 X轴 Y轴
    barList.add(new BarEntry(i, data[i]));
}

共用方法

方法名	描述
dataSet.setColor(int)	设置折线/柱子的颜色，颜色可以通过 Color.parseColor(“#xxxxxx”) 得到
dataSet.setValueTextSize(float)	设置折线点/柱子上的字体大小
dataSet.setValueFormatter(IValueFormatter)	对折线点/柱子上的数据重新进行显示，可以实现加单位（详见 8、IValueFormatter 接口)）

dataSet.setHighlightEnabled(boolean)	选中数据是否高亮显示，true：高亮显示，默认 true
dataSet.setHighLightColor(int)	设置高亮颜色（如果不高亮显示，该设置无效）

dataSet.addEntry(Entry)	向 DataSet 中添加一个 Entry 对象（数据）
dataSet.removeFirst()	删除 DataSet 的第一个 Entry 对象（数据）
dataSet.removeLast()	删除 DataSet 的最后一个 Entry 对象（数据）
dataSet.removeEntry(Entry) dataSet.removeEntry(int xIndex)	删除指定的一个 Entry 对象（数据）

3.1 LineDataSet

方法名	描述
lineDataSet.setLineWidth(float)	设置折线的宽度
lineDataSet.setCircleColor(int)	设置折线点的颜色，颜色可以通过Color.parseColor(“#xxxxxx”) 得到
lineDataSet.setCircleRadius(float)	设置折线点的半径

lineDataSet.setDrawCircleHole(boolean)	是否将折线点画成空心圆，true：画成空心圆，默认 false
lineDataSet.setCircleHoleRadius(float)	设置折线点空心圆的圆心半径（如果没有设置成空心圆，该设置无效）
lineDataSet.setCircleColorHole(int)	设置折线点空心圆内部的颜色（如果没有设置成空心圆，该设置无效）

lineDataSet.setHighlightLineWidth(float)	设置高亮指示线宽度（如果不高亮显示，该设置无效）

3.2 BarDataSet

方法名	描述
barDataSet.setBarBorderColor(int)	设置柱子边框颜色，颜色可以通过 Color.parseColor(“#xxxxxx”) 得到
barDataSet.setBarBorderWidth(float)	设置柱子边框厚度

barDataSet.setHighLightAlpha(int)	设置柱子高亮显示时的颜色透明度，0：完全透明， 255：完全不透明（如果不高亮显示，该设置无效）

4、Data 类

ChartData 类是所有图表数据类的基类

public class LineData extends ChartData {
    
     ...

作用

**将一个或若干个 -DataSet 数据类做进一步的包装，由 -Data 类进行管理。**并通过它传递给 -Chart 类进行显示。

构造方法

xxxData data = new xxxData(IBarDataSet DataSet);

DataSet：前面提到的 xxxDataSet 数据类。

共用方法

方法名	描述
data.addDataSet(DataSet)	添加一组新的数据（动态添加数据的时候使用）（详见 3、DataSet 类)）
data.addEntry(Entry e, int dataSetIndex)	将 Entry 对象添加到内部的某一个 DataSet（由 dataSetIndex 决定）中去
data.removeDataSet(DataSet) data.removeDataSet(int index)	删除指定的一个 DataSet

data.setValueFormatter(IValueFormatter)	对折线点/柱子上的数据重新进行显示，可以实现加单位（详见 8、IValueFormatter 接口)）
data.setDrawValues(boolean)	是否显示各个数据的值，false：不显示，默认 true

4.1 BarChart

方法名	描述
barChart.setBarWidth(float)	设置柱子宽度，一般不超过 1 就可以了

5、AxisBase 类

作用

该类是 Chart 图表的 X/Y 轴的基类。

共用方法

方法名	描述
Axis.setTextSize(float)	设置坐标轴的字体大小
Axis.setAxisLineColor(int)	设置坐标轴的字体颜色，颜色可以通过 Color.parseColor(“#xxxxxx”) 得到
Axis.setAxisLineWidth(float)	设置坐标轴的粗细
Axis.setValueFormatter(IAxisValueFormatter)	重新格式化坐标轴标签（值）（详见 9、IAxisValueFormatter 接口)）

Axis.setAxisMinimum(float) Axis.setAxisMaximum(float)	设置坐标轴显示的区间
Axis.setGranularity(float)	设置坐标轴坐标之间的最小间隔
Axis.setLabelCount(int)	设置坐标轴总共有多少个值

Axis.addLimitLine(LimitLine)	向坐标轴上添加一条新的限制线（详见 6、LimitLine 类)）
Axis.removeLimitLine(LimitLine)	从坐标轴上移除一条限制线（详见 6、LimitLine 类)）
Axis.setDrawLimitLinesBehindData(boolean)	设置限制线和数据标签的图层顺序，true：限制线将绘制在数据的后面，否则绘制在前面，默认为 false

Axis.setDrawGridLines(boolean)	是否绘制坐标轴的网格线，false：不绘制，默认 true
Axis.setGridColor(int)	设置坐标轴的网格线的颜色，颜色可以通过 Color.parseColor(“#xxxxxx”) 得到

5.1 XAxis

作用

该类是 Chart 图表的 X 轴，由 chart.getXAxis() 获取。

常用方法

方法名	描述
xAxis.setPosition(XAxis.XAxisPosition.xxx)	设置 X 轴的位置。可取：BOTTOM、BOTH_SIDED BOTTOM_INSIDE、TOP、TOP_INSIDE
xAxis.setLabelCount(int)	设置 X 轴总共有多少个值，一般该方法后面跟着 chart.setVisibleXRangeMaximum(float)

xAxis.setLabelRotationAngle(float)	设置 X 轴标签数据旋转的角度

5.2 YAxis

作用

该类是 Chart 图表的 Y 轴，但 Chart 中有左右两个 Y 轴，分别由 chart.getAxisLeft()、chart.getAxisRight() 获取。

常用方法

方法名	描述
yAxis.setEnabled(boolean)	设置该 Y 轴是否显示，false：不显示，默认显示
yAxis.setInverted(boolean)	设置是否倒置高低值，true：大值将会在底部出现，小值将会在顶部出现，默认 false

6、LimitLine 类

作用

该类是 Chart 的限制线，作用是呈现一些特殊的信息，像边界、约束等。

构造函数

LimitLine limitLine = new LimitLine(float limit, String label);

limit：这条线应该出现在坐标轴上的位置（值）
label：该限制线的名字

常用方法

方法名	描述
limitLine.setLabelPosition(LimitLine.LimitLabelPosition.xxx)	设置限制线描述字符串的位置，可以取值：LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM
limitLine.setLineWidth(float)	设置限制线的宽度
limitLine.setTextSize(float)	设置限制线描述字符串的大小
limitLine.setTextColor(int)	设置限制线描述字符串的颜色，颜色可以通过Color.parseColor(“#xxxxxx”) 得到
limitLine.setLineColor(int)	设置限制线的颜色，颜色可以通过 Color.parseColor(“#xxxxxx”) 得到

7、Description 类

作用

该类是一个 Chart 类的标题。

构造函数

Description description = new Description();

常用方法

方法名	描述
description.setText(String)	设置图表标题名
description.setTextSize(float)	设置图表标题大小
description.setPosition(float x, float y)	设置图表标题位置

8、IValueFormatter 接口

作用

对数据组 DataSet 中的数据标签进行重新格式化。

例子

DataSet.setValueFormatter(new IValueFormatter() {
    
    
    @Override
    public String getFormattedValue(float v, Entry entry, int i, ViewPortHandler viewPortHandler) {
    
    
        if(entry.getY() == v){
    
    
            return v + "h";
        }
        return "";
    }
});

v：要格式化的值
enry：值所属的条目

9、IAxisValueFormatter 接口

作用

对坐标轴的标签进行重新格式化。

例子

String[] data;
    
Axis.setValueFormatter(new IAxisValueFormatter() {
    
    
    @Override
    public String getFormattedValue(float value, AxisBase axis) {
    
    
        if((int)value >= 0 && (int)value < data.length) {
    
    
            return data[(int) value];
        }
        return "";
    }
});

value：要格式化的值

10、OnChartValueSelectedListener 接口

作用

监听是否点击了数据组中的数据。可以在该监听函数中实现点击不同的数据在另一个 Chart 中展现对应的不同的数据。

例子

chart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    
    
    // 点击数据后的回调函数
    @Override
    public void onValueSelected(Entry entry, Highlight highlight) {
    
    
        int iEntry = (int) entry.getX();
    }
	
    // 取消点击数据后的回调函数
    @Override
    public void onNothingSelected() {
    
    

    }
});

11、例子

在这里插入图片描述

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/bar"
        android:layout_marginTop="50dp"
        android:layout_width="380dp"
        android:layout_height="258dp"
        android:layout_gravity="center" >
    </com.github.mikephil.charting.charts.BarChart>

// x轴
String[] day = {
    
    "1-1", "1-2", "1-3", "1-4", "1-5", "1-6", "1-7"};
// x轴对应的数据
float[] time = {
    
    (float)6.8, (float)5.4, (float)2.9, (float)8.2, (float)4.7, (float)6.1, (float)9.2};
// 实例化一个List用来存储数据
List<BarEntry> barList = new ArrayList<>();


/*柱状图*/
mBarChart = (BarChart) findViewById(R.id.bar);
// 是否使能缩放
mBarChart.setScaleEnabled(false);
mBarChart.setExtraLeftOffset(10);
mBarChart.setExtraTopOffset(50);
// 动画
mBarChart.animateY(1000);

/** 柱子 **/
// 填充数据
for(int i = 0; i < time.length; i++) {
    
    
    // 两个数字对应的分别是 X轴 Y轴
    barList.add(new BarEntry(i, time[i]));
}
// 设置该组数据名称
BarDataSet barDataSet = new BarDataSet(barList,"时长");
// 设置柱子颜色
barDataSet.setColors(Color.parseColor("#D2B48C"));
// 柱子边框颜色
barDataSet.setBarBorderColor(Color.parseColor("#CD853F"));
// 柱子边框厚度
barDataSet.setBarBorderWidth(2);
// 设置柱子高亮显示时的颜色透明度，当不高亮显示时，该设置无效
barDataSet.setHighLightAlpha(100);
// 设置柱子上字体大小
barDataSet.setValueTextSize(11);
// 定义柱子上的数据显示，可以实现加单位
barDataSet.setValueFormatter(new IValueFormatter() {
    
    
    @Override
    public String getFormattedValue(float v, Entry entry, int i, ViewPortHandler viewPortHandler) {
    
    
        if(entry.getY() == v){
    
    
            return v + "h";
        }
        return "";
    }
});
BarData barData = new BarData(barDataSet);
// 设置柱子宽度
barData.setBarWidth(0.7f);
mBarChart.setData(barData);

/** X轴 **/
XAxis xAxis = mBarChart.getXAxis();
// 设置X轴的位置  BOTTOM  BOTH_SIDED  BOTTOM_INSIDE  TOP  TOP_INSIDE
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
// 设置X轴坐标之间的最小间隔
xAxis.setGranularity(1);
// 设置X轴的刻度数量
xAxis.setLabelCount(day.length);
// 设置当前图表中最多在x轴坐标线上显示刻度线的总量
mBarChart.setVisibleXRangeMaximum(8);
// 设置X轴的字体大小
xAxis.setTextSize(11);
// 设置X轴的字体颜色
xAxis.setAxisLineColor(Color.BLACK);
// 设置X轴的粗细
xAxis.setAxisLineWidth(1);
// 是否绘制X轴的网格线
xAxis.setDrawGridLines(false);
// 给X轴设置新的标签（值）
xAxis.setValueFormatter(new IAxisValueFormatter() {
    
    
    @Override
    public String getFormattedValue(float value, AxisBase axis) {
    
    
        if((int)value >= 0 && (int)value < day.length) {
    
    
            return day[(int)value];
        }
        return "";
    }
});

/** Y轴 **/
YAxis leftYAxis = mBarChart.getAxisLeft();
YAxis rightYAxis = mBarChart.getAxisRight();
// 设置某一个Y轴是否显示
rightYAxis.setEnabled(false);
// 设置Y轴显示的区间
leftYAxis.setAxisMinimum(0);
leftYAxis.setAxisMaximum(10);
// 设置Y轴值之间的间隔
leftYAxis.setGranularity(2);
// 设置Y轴总共有多少个值
leftYAxis.setLabelCount(6);
// 设置Y轴字体大小
leftYAxis.setTextSize(11);
// 设置Y轴字体颜色
leftYAxis.setAxisLineColor(Color.BLACK);
// 设置Y轴的粗细
leftYAxis.setAxisLineWidth(1f);
// 给Y轴设置新的标签（值）
leftYAxis.setValueFormatter(new IAxisValueFormatter() {
    
    
    @Override
    public String getFormattedValue(float v, AxisBase axisBase) {
    
    
        return (int)v + "h";
    }
});

/** 限制线 **/
// 创建一个新的限制线
LimitLine limitLine = new LimitLine(8,"限制线");
// 设置限制线的宽度
limitLine.setLineWidth(2);
limitLine.setTextSize(11);
limitLine.setTextColor(Color.parseColor("#B22222"));
limitLine.setLineColor(Color.RED);
leftYAxis.addLimitLine(limitLine);

/** 图例 **/
Legend legend = mBarChart.getLegend();
// 设置图例的文本颜色
legend.setTextColor(Color.BLACK);
legend.setTextSize(12);

/** 图表标题 **/
Description description = new Description();
description.setText("图表标题");
description.setTextSize(17);
WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
int w = windowManager.getDefaultDisplay().getWidth();
description.setPosition(w / 2 + 100, 90);
mBarChart.setDescription(description);

【Android Studio】第三方库图表（MPAndroidChart）使用

1、添加依赖

2、Chart 类

3、DataSet 类

3.1 LineDataSet

3.2 BarDataSet

4、Data 类

4.1 BarChart

5、AxisBase 类

5.1 XAxis

5.2 YAxis

6、LimitLine 类

7、Description 类

8、IValueFormatter 接口

9、IAxisValueFormatter 接口

10、OnChartValueSelectedListener 接口

11、例子

猜你喜欢

【Android Studio】第三方库 图表（MPAndroidChart）使用

1、添加依赖

2、Chart 类

3、DataSet 类

3.1 LineDataSet

3.2 BarDataSet

4、Data 类

4.1 BarChart

5、AxisBase 类

5.1 XAxis

5.2 YAxis

6、LimitLine 类

7、Description 类

8、IValueFormatter 接口

9、IAxisValueFormatter 接口

10、OnChartValueSelectedListener 接口

11、例子

猜你喜欢

【Android Studio】第三方库图表（MPAndroidChart）使用