Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3.0)
MPAndroidChart在github上16.6K个star,是一款十分强大的图表框架。
前面写了几篇使用MPAndroidChart库显示图标控件的文章,只是把代码贴出来了而已,现在简单介绍一下最新的图表控件的使用方法。
相关文章:
Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3.0)
Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)
Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据
Android图表控件MPAndroidChart——柱状图BarChart的使用(多条柱状图)
Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用
Android图表控件MPAndroidChart——源码修改实现曲线图X轴直尺刻度样式
我的Android Studio 使用的是Eclipse模式的快捷键,查看Chart类,按下F4可查看和Chart相关的继承关系,如下图
每个类对应的图是什么github上有详细的介绍
图表类具有相同的地方
X轴:XAxis
Y轴:YAxis
图例:Legend
描述:Description
限制线:LimitLine
选中图表中的值,可显示的视图:MarkerView 具体在图表中的表现如下图
以曲线图为例
依赖:project
build.gradle 中
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
app
build.gradle 中
compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
最简单的代码
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.github.mikephil.charting.charts.LineChart android:id="@+id/lineChart" android:layout_width="match_parent" android:layout_height="300dp" android:layout_centerInParent="true"/> </RelativeLayout>
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LineChart mLineChart = (LineChart) findViewById(R.id.lineChart); //显示边界 mLineChart.setDrawBorders(true); //设置数据 List<Entry> entries = new ArrayList<>(); for (int i = 0; i < 10; i++) { entries.add(new Entry(i, (float) (Math.random()) * 80)); } //一个LineDataSet就是一条线 LineDataSet lineDataSet = new LineDataSet(entries, "温度"); LineData data = new LineData(lineDataSet); mLineChart.setData(data); }
效果图:
一.XAxis(X轴)
1.得到X轴:
XAxis xAxis = mLineChart.getXAxis();
2.设置X轴的位置(默认在上方):
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//值:BOTTOM,BOTH_SIDED,BOTTOM_INSIDE,TOP,TOP_INSIDE
3.设置X轴坐标之间的最小间隔(因为此图有缩放功能,X轴,Y轴可设置可缩放)
xAxis.setGranularity(1f);
对比图:左图X轴在图缩放时值的间隔会按比例改变,而右图进行设置后,最小间隔始终为1
4.设置X轴的刻度数量
xAxis.setLabelCount(12, true);
第二个参数表示是否平均分配 如果为true则按比例分为12个点、如果为false则适配X刻度的值来分配点,可能没有12个点。
对比图:左图的参数为true,右图的参数为false
5.设置X轴的值(最小值、最大值、然后会根据设置的刻度数量自动分配刻度显示)
xAxis.setAxisMinimum(0f); xAxis.setAxisMaximum(20f);
前面是的X轴是根据(X,Y)的值默认显示的X轴,现在才是真正的设置规定的值
效果图:
6.设置X轴值为字符串(如上右图)
xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return mList.get((int) value); //mList为存有月份的集合 } });
想要显示完整的12个月份,要与(x,y)坐标对应数量 10 改成 12
for (int i = 0; i < 12; i++) { entries.add(new Entry(i, (float) (Math.random()) * 80)); }
还有设置线条颜色、字体颜色、等等,可查看详细的文档。
7.取消曲线显示的值为整数
与设置自定义X轴类似,设置曲线显示值为整数,可在设置曲线LineDataSet 时,修改值的类型
lineDataSet.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { int IValue = (int) value; return String.valueOf(IValue); } });
二.YAxis(Y轴)
如上面的图所示,Y轴总会高出X轴一点,并没有从0点开始,因此需要对Y轴进行设置
Y轴和X轴类似
1.得到Y轴
YAxis leftYAxis = mLineChart.getAxisLeft(); YAxis rightYAxis = mLineChart.getAxisRight();
2.设置从Y轴值
leftYAxis.setAxisMinimum(0f); leftYAxis.setAxisMaximum(100f); rightYAxis.setAxisMinimum(0f); rightYAxis.setAxisMaximum(100f);
以及
leftYAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return (int) value + "%"; } });
效果图:
3.设置Y轴是否显示(效果如上右图)
rightYAxis.setEnabled(false); //右侧Y轴不显示
4.X轴和Y轴类似,都具有相同的属性方法
rightYAxis.setGranularity(1f); rightYAxis.setLabelCount(11,false); rightYAxis.setTextColor(Color.BLUE); //文字颜色 rightYAxis.setGridColor(Color.RED); //网格线颜色 rightYAxis.setAxisLineColor(Color.GREEN); //Y轴颜色
5.限制线LimitLine(如上右图)
LimitLine limitLine = new LimitLine(95,"高限制性"); //得到限制线 limitLine.setLineWidth(4f); //宽度 limitLine.setTextSize(10f); limitLine.setTextColor(Color.RED); //颜色 limitLine.setLineColor(Color.BLUE); rightYAxis.addLimitLine(limitLine); //Y轴添加限制线
三.Legend(图例:即上图所示的曲线图下面的 温度)
1.得到Lengend
Legend legend = mLineChart.getLegend();
2.设置Lengend位置
legend.setTextColor(Color.CYAN); //设置Legend 文本颜色 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
3.设置标签是否换行(当多条标签时 需要换行显示、如上右图)
true:可换行。false:不换行
legend.setWordWrapEnabled(true);
4.隐藏Lengend
legend.setEnabled(false);
如下图所示
四.Description(描述)
1.隐藏描述
Description description = new Description(); description.setEnabled(false); mLineChart.setDescription(description);
2.设置描述内容
Description description = new Description(); description.setText("X轴描述"); description.setTextColor(Color.RED); mLineChart.setDescription(description);
五.MarkerView
MarkerView可自定义,用于点击图标值时显示想要的内容 效果如上右图
1.自定义MarkerView
public class MyMarkerView extends MarkerView { private TextView tvContent; private DecimalFormat format = new DecimalFormat("##0"); public MyMarkerView(Context context) { super(context, R.layout.layout_markerview); tvContent = (TextView) findViewById(R.id.tvContent); } @Override public void refreshContent(Entry e, Highlight highlight) { tvContent.setText(format.format(e.getY())); super.refreshContent(e, highlight); } @Override public MPPointF getOffset() { return new MPPointF(-(getWidth() / 2), -getHeight() - 10); } }2.设置显示MarkerView
MyMarkerView mv = new MyMarkerView(this); mLineChart.setMarkerView(mv);
折线图的线条设置
//一个LineDataSet就是一条线 LineDataSet lineDataSet = new LineDataSet(entries, "温度"); //设置曲线值的圆点是实心还是空心 lineDataSet.setDrawCircleHole(false); //设置显示值的字体大小 lineDataSet.setValueTextSize(9f); //线模式为圆滑曲线(默认折线) lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
柱状图,饼状图,组合图等等,用法类似,方法很多,无法列举,遇见问题时多看官方文档
在附一下地址
我以前写的一些管理类可做点参考:https://github.com/897532167/ChartManager