原文作者：android157
原文地址：https://blog.csdn.net/android157/article/details/82286919
image.png
一、添加依赖
Usage chart_with_upwards_trend
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使用，请查看官方文档
官方文档：https://github.com/PhilJay/MPAndroidChart
MPAndroidChart中文文档下载地址：https://download.csdn.net/download/android157/11188758
博客：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
网友评论