MPAndroidChart的基本使用
目录
二、layout布局，我这里实现了三个图形，可以根据自己的需要，添加图形控件
图形横纵坐标默认为float形式，如果想展示文字形式，需要自定义适配器。自定义适配器会在“四”中列出
六、这里只实现了些基本功能，更多的API使用，请查看官方文档
本文讲述对MPAndroidChart的基本使用
一、添加依赖
Usage
Gradle
- Project level
build.gradle（在project的build.gradle中添加依赖）
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}- App level
build.gradle（在app的build.gradle中添加依赖）
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}二、layout布局，我这里实现了三个图形，可以根据自己的需要，添加图形控件
<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="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="柱形图" />
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/chart1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_margin="10dp"
android:padding="20dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="水平柱形图" />
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="@+id/hBarChart"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_margin="10dp"
android:background="@android:color/white"
android:padding="20dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="折线图" />
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_margin="10dp"
android:padding="20dp" />
</LinearLayout>
</ScrollView>
三、实现代码
图形横纵坐标默认为float形式，如果想展示文字形式，需要自定义适配器。自定义适配器会在“四”中列出
public class FifteenActivity extends AppCompatActivity implements
OnChartValueSelectedListener {
private String[] mMonths = new String[]{
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"};
private String[] mParties = new String[]{
"Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H",
"Party I", "Party J", "Party K", "Party L", "Party M", "Party N", "Party O", "Party P",
"Party Q", "Party R", "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
"Party Y", "Party Z"
};
private Typeface mTfRegular;
private Typeface mTfLight;
protected BarChart mChart;
private HorizontalBarChart hBarChart;
private LineChart lineChart;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fifteen_layout);
mTfRegular = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");
mTfLight = Typeface.createFromAsset(getAssets(), "OpenSans-Light.ttf");
mChart = findViewById(R.id.chart1);
hBarChart = findViewById(R.id.hBarChart);
lineChart = findViewById(R.id.lineChart);
initBarChart();
initHBarChart();
initLineChart();
}
/**
* 初始化柱形图控件属性
*/
private void initBarChart() {
mChart.setOnChartValueSelectedListener(this);
mChart.setDrawBarShadow(false);
mChart.setDrawValueAboveBar(true);
mChart.getDescription().setEnabled(false);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
mChart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
mChart.setPinchZoom(false);
mChart.setDrawGridBackground(false);
// IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart);
//自定义坐标轴适配器，配置在X轴，xAxis.setValueFormatter(xAxisFormatter);
IAxisValueFormatter xAxisFormatter = new XAxisValueFormatter();
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTypeface(mTfLight);//可以去掉，没什么用
xAxis.setDrawAxisLine(false);
xAxis.setGranularity(1f);
xAxis.setValueFormatter(xAxisFormatter);
//自定义坐标轴适配器，配置在Y轴。leftAxis.setValueFormatter(custom);
IAxisValueFormatter custom = new MyAxisValueFormatter();
//设置限制临界线
LimitLine limitLine = new LimitLine(3f, "临界点");
limitLine.setLineColor(Color.GREEN);
limitLine.setLineWidth(1f);
limitLine.setTextColor(Color.GREEN);
//获取到图形左边的Y轴
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.addLimitLine(limitLine);
leftAxis.setTypeface(mTfLight);//可以去掉，没什么用
leftAxis.setLabelCount(8, false);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
leftAxis.setAxisMinimum(0f);
//获取到图形右边的Y轴，并设置为不显示
mChart.getAxisRight().setEnabled(false);
//图例设置
Legend legend = mChart.getLegend();
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);
legend.setForm(Legend.LegendForm.SQUARE);
legend.setFormSize(9f);
legend.setTextSize(11f);
legend.setXEntrySpace(4f);
//如果点击柱形图，会弹出pop提示框.XYMarkerView为自定义弹出框
XYMarkerView mv = new XYMarkerView(this, xAxisFormatter);
mv.setChartView(mChart);
mChart.setMarker(mv);
setBarChartData();
}
/**
* 初始化水平柱形图图控件属性
*/
private void initHBarChart() {
hBarChart.setOnChartValueSelectedListener(this);
hBarChart.setDrawBarShadow(false);
hBarChart.setDrawValueAboveBar(true);
hBarChart.getDescription().setEnabled(false);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
hBarChart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
hBarChart.setPinchZoom(false);
// draw shadows for each bar that show the maximum value
// mChart.setDrawBarShadow(true);
hBarChart.setDrawGridBackground(false);
//自定义坐标轴适配器，设置在X轴
DecimalFormatter formatter = new DecimalFormatter();
XAxis xl = hBarChart.getXAxis();
xl.setPosition(XAxis.XAxisPosition.BOTTOM);
xl.setTypeface(mTfLight);
xl.setLabelRotationAngle(-45f);
xl.setDrawAxisLine(true);
xl.setDrawGridLines(false);
xl.setGranularity(1f);
// xl.setAxisMinimum(0);
xl.setValueFormatter(formatter);
//对Y轴进行设置
YAxis yl = hBarChart.getAxisLeft();
yl.setTypeface(mTfLight);
yl.setDrawAxisLine(true);
yl.setDrawGridLines(true);
yl.setAxisMinimum(0f); // this replaces setStartAtZero(true)
// yl.setInverted(true);
hBarChart.getAxisRight().setEnabled(false);
//图例设置
Legend l = hBarChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setFormSize(8f);
l.setXEntrySpace(4f);
setHBarChartData();
hBarChart.setFitBars(true);
hBarChart.animateY(2500);
}
/**
* 初始化折线图控件属性
*/
private void initLineChart() {
lineChart.setOnChartValueSelectedListener(this);
lineChart.getDescription().setEnabled(false);
lineChart.setBackgroundColor(Color.WHITE);
//自定义适配器，适配于X轴
IAxisValueFormatter xAxisFormatter = new XAxisValueFormatter();
XAxis xAxis = lineChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTypeface(mTfLight);
xAxis.setGranularity(1f);
xAxis.setValueFormatter(xAxisFormatter);
//自定义适配器，适配于Y轴
IAxisValueFormatter custom = new MyAxisValueFormatter();
YAxis leftAxis = lineChart.getAxisLeft();
leftAxis.setTypeface(mTfLight);
leftAxis.setLabelCount(8, false);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
leftAxis.setAxisMinimum(0f);
lineChart.getAxisRight().setEnabled(false);
setLineChartData();
}
private float getRandom(float range, float startsfrom) {
return (float) (Math.random() * range) + startsfrom;
}
@Override
public void onValueSelected(Entry e, Highlight h) {
}
@Override
public void onNothingSelected() {
}
private void setBarChartData() {
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
//在这里设置自己的数据源,BarEntry 只接收float的参数，
//图形横纵坐标默认为float形式，如果想展示文字形式，需要自定义适配器，
yVals1.add(new BarEntry(0, 4));
yVals1.add(new BarEntry(1, 2));
yVals1.add(new BarEntry(2, 6));
yVals1.add(new BarEntry(3, 1));
BarDataSet set1;
if (mChart.getData() != null &&
mChart.getData().getDataSetCount() > 0) {
set1 = (BarDataSet) mChart.getData().getDataSetByIndex(0);
set1.setValues(yVals1);
mChart.getData().notifyDataChanged();
mChart.notifyDataSetChanged();
} else {
set1 = new BarDataSet(yVals1, "The year 2017");
set1.setDrawIcons(false);
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setValueTypeface(mTfLight);//可以去掉，没什么用
data.setBarWidth(0.9f);
mChart.setData(data);
}
}
/**
* 设置水平柱形图数据的方法
*/
private void setHBarChartData() {
//填充数据，在这里换成自己的数据源
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
yVals1.add(new BarEntry(0, 4));
yVals1.add(new BarEntry(1, 2));
yVals1.add(new BarEntry(2, 6));
yVals1.add(new BarEntry(3, 1));
BarDataSet set1;
if (hBarChart.getData() != null &&
hBarChart.getData().getDataSetCount() > 0) {
set1 = (BarDataSet) hBarChart.getData().getDataSetByIndex(0);
set1.setValues(yVals1);
hBarChart.getData().notifyDataChanged();
hBarChart.notifyDataSetChanged();
} else {
set1 = new BarDataSet(yVals1, "DataSet 1");
set1.setDrawIcons(false);
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setValueTypeface(mTfLight);//可以去掉，没什么用
data.setBarWidth(0.5f);
hBarChart.setData(data);
}
}
/**
* 设置折线图的数据
*/
private void setLineChartData() {
//填充数据，在这里换成自己的数据源
List<Entry> valsComp1 = new ArrayList<>();
List<Entry> valsComp2 = new ArrayList<>();
valsComp1.add(new Entry(0, 2));
valsComp1.add(new Entry(1, 4));
valsComp1.add(new Entry(2, 0));
valsComp1.add(new Entry(3, 2));
valsComp2.add(new Entry(0, 2));
valsComp2.add(new Entry(1, 0));
valsComp2.add(new Entry(2, 4));
valsComp2.add(new Entry(3, 2));
//这里，每重新new一个LineDataSet，相当于重新画一组折线
//每一个LineDataSet相当于一组折线。比如:这里有两个LineDataSet：setComp1，setComp2。
//则在图像上会有两条折线图，分别表示公司1 和 公司2 的情况.还可以设置更多
LineDataSet setComp1 = new LineDataSet(valsComp1, "Company 1 ");
setComp1.setAxisDependency(YAxis.AxisDependency.LEFT);
setComp1.setColor(getResources().getColor(R.color.light_blue));
setComp1.setDrawCircles(false);
setComp1.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
LineDataSet setComp2 = new LineDataSet(valsComp2, "Company 2 ");
setComp2.setAxisDependency(YAxis.AxisDependency.LEFT);
setComp2.setDrawCircles(true);
setComp2.setColor(getResources().getColor(R.color.red));
setComp2.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
List<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(setComp1);
dataSets.add(setComp2);
LineData lineData = new LineData(dataSets);
lineChart.setData(lineData);
lineChart.invalidate();
}
public static void startActivity(Context context) {
Intent intent = new Intent();
intent.setClass(context, FifteenActivity.class);
context.startActivity(intent);
}
}
四、自定义适配器类
XAxisValueFormatter：
public class XAxisValueFormatter implements IAxisValueFormatter {
private String[] xStrs = new String[]{"春", "夏", "秋", "冬"};
@Override
public String getFormattedValue(float value, AxisBase axis) {
int position = (int) value;
if (position >= 4) {
position = 0;
}
return xStrs[position];
}
MyAxisValueFormatter：
public class MyAxisValueFormatter implements IAxisValueFormatter {
private DecimalFormat mFormat;
public MyAxisValueFormatter() {
mFormat = new DecimalFormat("###,###,###,##0.000");
}
@Override
public String getFormattedValue(float value, AxisBase axis) {
return mFormat.format(value) + " $";
}
}
DecimalFormatter：
public class DecimalFormatter implements IAxisValueFormatter {
private DecimalFormat format;
public DecimalFormatter() {
format = new DecimalFormat("###,###,##0.00");
}
@Override
public String getFormattedValue(float value, AxisBase axis) {
return format.format(value) + "$";
}
}
五、自定义MarkerView
public class XYMarkerView extends MarkerView {
private TextView tvContent;
private IAxisValueFormatter xAxisValueFormatter;
private DecimalFormat format;
public XYMarkerView(Context context, IAxisValueFormatter xAxisValueFormatter) {
super(context, R.layout.custom_marker_view);
this.xAxisValueFormatter = xAxisValueFormatter;
tvContent = findViewById(R.id.tvContent);
format = new DecimalFormat("###.000");
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
tvContent.setText("x：" + xAxisValueFormatter.getFormattedValue(e.getX(), null) + "，y：" + format.format(e.getY()));
super.refreshContent(e, highlight);
}
@Override
public MPPointF getOffset() {
return new MPPointF(-(getWidth() / 2), -getHeight());
}
}
custom_marker_view：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/marker2" >
<TextView
android:id="@+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="asdf"
android:textSize="12dp"
android:textColor="@android:color/white"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>六、这里只实现了些基本功能，更多的API使用，请查看官方文档
demo下载地址：https://github.com/XiaoWuLibs/MyDemo
demo中是本人自己的练习demo，会有很多功能。主页会有很多按钮，btn15是统计图对应的代码。如有需要，请自行查看。
官方文档：https://github.com/PhilJay/MPAndroidChart
MPAndroidChart中文文档下载地址：https://download.csdn.net/download/android157/11188758
由于csdn的机制，一篇文章被多次下载就会增加下载积分，所以，新建五个副本，大家下载的时候挑选积分低的下载
MPAndroidChart中文文档下载地址副本1：https://download.csdn.net/download/android157/11214720
MPAndroidChart中文文档下载地址副本2：https://download.csdn.net/download/android157/11214726
MPAndroidChart中文文档下载地址副本3：https://download.csdn.net/download/android157/11214727
MPAndroidChart中文文档下载地址副本4：https://download.csdn.net/download/android157/11214732
MPAndroidChart中文文档下载地址副本5：https://download.csdn.net/download/android157/11214741
博客：https://blog.csdn.net/koma025/article/details/53886832
设置多组y值：https://blog.csdn.net/u011125199/article/details/52797439
修改源代码：https://blog.csdn.net/dt235201314/article/details/70142117
折线图设置文档：https://zhuanlan.zhihu.com/p/25672390
6650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
