Android图表控件MPAndroidChart的简单介绍（MPAndroidChart3.0）

MPAndroidChart在github上16.6K个star，是一款十分强大的图表框架。

GitHub地址： https://github.com/PhilJay/MPAndroidChart 文档地址： https://jitpack.io/com/github/PhilJay/MPAndroidChart/v3.0.2/javadoc 前面写了几篇使用MPAndroidChart库显示图标控件的文章，只是把代码贴出来了而已，现在简单介绍一下最新的图表控件的使用方法。

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'

最简单的代码

    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">            android:id="@+id/lineChart"        android:layout_width="match_parent"        android:layout_height="300dp"        android:layout_centerInParent="true"/>

@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    LineChart mLineChart = (LineChart) findViewById(R.id.lineChart);    //显示边界    mLineChart.setDrawBorders(true);    //设置数据    List 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);

柱状图，饼状图，组合图等等，用法类似，方法很多，无法列举，遇见问题时多看官方文档在附一下地址 GitHub地址： https://github.com/PhilJay/MPAndroidChart 文档地址： https://jitpack.io/com/github/PhilJay/MPAndroidChart/v3.0.2/javadoc 我以前写的一些管理类可做点参考： https://github.com/897532167/ChartManager

更多相关文章

随机推荐