1. 程式人生 > >Android圖表控制元件MPAndroidChart的簡單介紹(MPAndroidChart3.0)

Android圖表控制元件MPAndroidChart的簡單介紹(MPAndroidChart3.0)

每個類對應的圖是什麼github上有詳細的介紹圖表類具有相同的地方X軸:XAxisY軸: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,右圖的引數為false5.設定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);

五.MarkerViewMarkerView可自定義,用於點選圖示值時顯示想要的內容 效果如上右圖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);

柱狀圖,餅狀圖,組合圖等等,用法類似,方法很多,無法列舉,遇見問題時多看官方文件在附一下地址