最近做了兩個資料展示的APP，都使用到了MPAndroidChart這個圖表框架。

下面就來講解一下MPChart的使用

MPAndoridChart

Chart types（目前支援的圖表類別）

• LineChart (with legend, simple design) (線性圖1)
  

• LineChart (with legend, simple design) (線性圖2)
  

• LineChart (cubic lines) (線性圖3)
  

• LineChart (gradient fill) (線性圖4)
  

• Combined-Chart (bar- and linechart in this case) (組合圖 柱狀圖加線形圖組合)
  

• BarChart (with legend, simple design)(柱狀圖1)
  

• BarChart (grouped DataSets) (柱狀圖2)

• Horizontal-BarChart(橫向柱狀圖)
  

• PieChart (with selection, …) (餅狀圖)
  

• ScatterChart (with squares, triangles, circles, … and more)(散點圖)
  

• CandleStickChart (for financial data) （燭形圖）
  

• BubbleChart (area covered by bubbles indicates the yValue)（氣泡圖）
  

• RadarChart (spider web chart)(雷達圖)
  

功能

• 支援x，y軸縮放
• 支援拖拽
• 支援手指滑動
• 支援高亮顯示
• 支援儲存圖表到檔案中
• 支援從檔案（txt）中讀取資料
• 預先定義顏色模板
• 自動生成標註
• 支援自定義x，y軸的顯示標籤
• 支援x，y軸動畫
• 支援x，y軸設定最大值和附加資訊
• 支援自定義字型，顏色，背景，手勢，虛線等

實現

寫sample的時候才發現，從1.0版本到3.0版本這個框架改動還是蠻多的。
主要是把雷達圖和餅狀圖抽取共用了。為了實現複合圖將X軸值的設定放到了Axais中。之前是直接放到ChartData中的。

圖表常用的實現：
每個圖表都必須實現填充ChartData，也就是XY軸的資料。
系統有預設的圖表樣式，可根據喜好設定圖表的樣式，各種顏色、形狀、資料之間的間距等。
可以根據圖表的繪製流程和圖表的點選事件(點選某個資料的監聽)設定監聽。
可以新增圖表的一些輔助顯示工具：MarkView(以MarkView的形式顯示資料，這種在資料量大的情況能避免資料顯示重疊)，Legend(圖表軸描述)
 

這邊以LineChart為例

package cn.xiaolongonly.mpchartsample.ui;

import android.graphics.Color;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;
import java.util.List;

import cn.xiaolongonly.mpchartsample.R;
import cn.xiaolongonly.mpchartsample.base.BaseActivity;
import cn.xiaolongonly.mpchartsample.chart.markview.DataMarkView;
import cn.xiaolongonly.mpchartsample.chart.util.ColorTemplate;

/**
 * @author xiaolong
 * @version v1.0
 * @function <描述功能>
 * @date 2016/12/6-9:10
 */
public class LineChartActivity1 extends BaseActivity {
    private LineChart chart;

    @Override
    protected int getLayoutId() {
        return R.layout.list_item_linechart;
    }

    @Override
    protected void initView() {
        chart = findView(R.id.chart);

        ChartConfig();
        //XY軸配置
        XAxis xAxis = chart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //定製X軸是在圖表上方還是下方。
        xAxis.setDrawGridLines(false);
        xAxis.setGranularity(1);
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return (int) value + "年";
            }
        });
        YAxis yAxisRight = chart.getAxisRight();
        yAxisRight.setEnabled(false);
        YAxis yAxisLeft = chart.getAxisLeft();
        yAxisLeft.setAxisMinValue(0);
        //動畫效果
        chart.animateX(750);
        chart.animateY(750);
    }

    /**
     * 圖表的配置 一些提示和Legend
     */
    private void ChartConfig() {

        //設定覆蓋物
        DataMarkView dataMarkView = new DataMarkView(this, 0, "");//自定義覆蓋物
        chart.setMarkerView(dataMarkView);

        //背景設定
        chart.setDrawGridBackground(false);//表格背景繪製
        chart.setBackgroundColor(getResources().getColor(R.color.chart_bg));

        //Legend定製
        chart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
        chart.getLegend().setForm(Legend.LegendForm.CIRCLE);//Legend樣式

        //圖表描述
        chart.setDescription(null);
        // 設定無資料文字提示
        chart.setNoDataText(getResources().getString(R.string.chart_no_data));
        //XY軸描述
        chart.setXYDesc("年份", "總金額（元)");
        //設定單方向和雙方向縮放 true x,y方向可以同時控制，false只能控制x方向的縮小放大或者Y方向的縮小放大
        chart.setPinchZoom(true);
        //填充資料
        chart.setData(new LineData(generateLineDataSet()));
    }

    @Override
    protected void setListener() {

    }


    private ILineDataSet generateLineDataSet() {
        int color = ColorTemplate.PIE_COLORS[0];
        LineDataSet dataSet = new LineDataSet(generateData(), "年度營業額曲線");
        dataSet.setLineWidth(2.0f);
        dataSet.setCircleRadius(3.5f);
        dataSet.setDrawCircleHole(true);//填充圓
        dataSet.setValueTextSize(9f);
        dataSet.setHighlightLineWidth(2.0f);
        dataSet.setDrawFilled(true);//區域顏色
        dataSet.setFillAlpha(51);
        dataSet.setFillColor(color); //填充色
        dataSet.setHighLightColor(color); //選中十字線色
        dataSet.setColor(color); //線條顏色
        dataSet.setCircleColor(color); //圓點顏色
        dataSet.setCircleColorHole(Color.WHITE);
        dataSet.setCircleHoleRadius(2.0f);
        dataSet.setDrawValues(false);
        return dataSet;
    }

    private List<Entry> generateData() {
        List<Entry> entryList = new ArrayList<>();
        entryList.add(new Entry(2013, 1000));
        entryList.add(new Entry(2014, 2000));
        entryList.add(new Entry(2015, 3000));
        entryList.add(new Entry(2016, 4000));
        return entryList;
    }
}

效果如下

    簡單的介紹了一下MPChart的實現，一般就兩個流程：
    一是設定圖表配置（Legend,X，Y軸樣式，圖表樣式，markView新增，動畫效果等，注：不設定的話會使用預設的配置）
    二是填充資料（將需要展示的資料繫結到圖表框架中）。
    圖表框架有寫地方並不能滿足我們的需求，比如說沒有XY軸描述。
    國內的人大部分看圖表的習慣就只需要顯示單條X，Y軸，並在軸末端設定單位等。
    下一篇文章介紹 自定義需求，XY軸描述新增。