MPAndroidChart使用教程

MPAndroidChart功能特別強大，使用的人也特別多，今天我就以LineChart為例來講解他的使用。本文分兩部分，一部分是基本的使用，另一部分是MarkView的使用

我們先看看效果是什麼樣的，這裡資料是隨便造的……

1、新增依賴

1.1、在project的build.gradle檔案配置新增一下內容

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

1.2 在app module的build.gradle中新增一下依賴

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

2 設定chart view

lineChart.getLegend().setEnabled(false);// 不顯示圖例
lineChart.getDescription().setEnabled(false);// 不顯示描述
lineChart.setScaleEnabled(false);   // 取消縮放
lineChart.setNoDataText("暫無資料");// 沒有資料的時候預設顯示的文字
lineChart.setNoDataTextColor(Color.GRAY);
lineChart.setBorderColor(Color.BLUE);
lineChart.setTouchEnabled(true
 
);
lineChart.setDragEnabled(true);
// 如果x軸label文字比較大，可以設定邊距
lineChart.setExtraRightOffset(25f);
lineChart.setExtraBottomOffset(10f);
lineChart.setExtraTopOffset(10f);

3、設定Y軸(此處Y軸顯示為金額)

// 設定左側Y軸顯示金額的格式
private DecimalFormat mDecimalFormat = new DecimalFormat("##,##0.0#");
// 不顯示右側Y軸
YAxis yAxisRight = lineChart.getAxisRight();
yAxisRight.setEnabled(false
 
);

YAxis yAxisLeft = lineChart.getAxisLeft();
// 強制顯示Y軸6個座標
yAxisLeft.setLabelCount(5, true);
// 將y軸0點軸的顏色設定為透明
yAxisLeft.setZeroLineColor(Color.WHITE);
yAxisLeft.setTextColor(Color.parseColor("#8F8E94"));
yAxisLeft.setTextSize(10);
//不顯示最頂部的label
//yAxisRight.setDrawTopYLabelEntry(false);
// 設定y軸網格的顏色
yAxisLeft.setGridColor(Color.parseColor("#8F8E94"));
// yAxisLeft.setGranularity(0.5f);
yAxisLeft.setAxisMaximum(0.0f);
//Y方向文字的位置，線上外側.(預設在外側)
yAxisLeft.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
//設定label偏移量，正值向下，負值向上
// yAxisLeft.setYOffset(-10f); 
// 格式化Y軸資料
yAxisLeft.setValueFormatter(new IAxisValueFormatter() {
    @Override
    public String getFormattedValue(float v, AxisBase axisBase) {
        return mDecimalFormat.format(v);
    }
});

4、設定X軸(此處X軸顯示為日期)

// 設定x軸的資料
XAxis xAxis = lineChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTextColor(Color.parseColor("#8F8E94"));
xAxis.setTextSize(10);
// 設定x軸網格的顏色
xAxis.setGridColor(Color.parseColor("#8F8E94"));
xAxis.setGranularity(1.0f);
//如果設定為true，則在繪製時會避免“剪掉”在x軸上的圖表或螢幕邊緣的第一個和最後一個座標軸標籤項。
// xAxis.setAvoidFirstLastClipping(true);
// x軸最左多出空n個座標
// xAxis.setSpaceMax(1.0f);
// 讓左側x軸不從0點開始
// xAxis.setSpaceMin(0.1f);

// 獲取到資料後，格式化x軸的資料
xAxis.setValueFormatter(new IAxisValueFormatter() {
    @Override
    public String getFormattedValue(float v, AxisBase axisBase) {
        int i = (int) v;
      // 只顯示首尾日期
      if (i == 0 || i == mXData.size() - 1) {
          return mXData.get(i);
      } else {
          return "";
      }
    }
});

5、設定資料

// 獲取的座標資料集合
List<Entry> entries = new ArrayList<>();
// 建立資料的包裝類
LineDataSet lineDataSet = new LineDataSet(entries, null);
// 點選圓點不顯示高亮
lineDataSet.setDrawHighlightIndicators(false);
// 設定折線的顏色
lineDataSet.setColor(Color.parseColor("#FC863E"));
// 填充顏色(漸變色)
lineDataSet.setDrawFilled(true);
lineDataSet.setFillDrawable(new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM,
        new int[]{Color.parseColor("#31FF5A00"), Color.parseColor("#00FA5544")}));
lineDataSet.setLineWidth(2f);
// 座標不顯示值
lineDataSet.setDrawValues(false);
lineData data = new LineData(lineDataSet);
lineChart.setData(data);

6、常見問題

6.1 x軸右或者側文字被覆蓋，設定chartview的間隔

lineChart.setExtraRightOffset(25f);
lineChart.setExtraLeftOffset(10f);
// 這個雖然也是但是效果不好
//如果設定為true，則在繪製時會避免“剪掉”在x軸上的圖表或螢幕邊緣的第一個和最後一個座標軸標籤項。
// xAxis.setAvoidFirstLastClipping(true);

6.2 給座標設定圖片icon，

Entry e = new Entry((float) i, dataBean.networth,getResources().getDrawable(R.drawable.icon_dot));

拿出微信 掃碼關注下面的微信訂閱號，及時獲取更多推送文章