前言
圖表繪制可能是我們項(xiàng)目開(kāi)發(fā)過(guò)程中比較常見(jiàn)的需求,簡(jiǎn)單點(diǎn)兒的需求,我們通過(guò)自定義控件就能完成,但是像那種比較復(fù)雜的圖表,通過(guò)自定義的方式實(shí)現(xiàn)起來(lái)就比較麻煩了,這個(gè)時(shí)候,我們就需要借助第三方的開(kāi)源庫(kù)來(lái)實(shí)現(xiàn)。
Android 平臺(tái)繪圖的開(kāi)源庫(kù)有好幾個(gè),最成熟最出名的就屬于MPAndroidChart了,他能幫我們實(shí)現(xiàn)曲線圖、折線圖、柱狀圖、餅狀圖,分布圖等等。同時(shí)還可以實(shí)現(xiàn)混合圖表。
-
曲線圖
曲線圖.png -
下方填充曲線圖,可以設(shè)置純色和漸變色
image.png
image.png -
混合圖表
混合圖表.png -
柱狀圖
柱狀圖.png
如上所示,實(shí)現(xiàn)的圖表種類非常多,還沒(méi)有列舉完全,功能非常強(qiáng)大,正好最近在項(xiàng)目中有使用到MPAndroidChart,在此做一個(gè)總結(jié)。
項(xiàng)目中使用效果截圖如下:

基礎(chǔ)設(shè)置相關(guān)API
- Chart 的基礎(chǔ)設(shè)置
// 設(shè)置是否繪制背景
mChart.setDrawGridBackground(false);
// 設(shè)置是否繪制邊框
mChart.setDrawBorders(false);
// 設(shè)置是否可以縮放圖表
mChart.setScaleEnabled(true);
// 設(shè)置是否可以用手指移動(dòng)圖表
mChart.setDragEnabled(true);
注意:這里說(shuō)一下后面2個(gè)屬性
setScaleEnabled和setDragEnabled,設(shè)置圖表是佛可以縮放和移動(dòng),當(dāng)手機(jī)屏幕一屏顯示不下時(shí),我們希望能通過(guò)縮放或者滑動(dòng)圖表。但是經(jīng)過(guò)試驗(yàn),僅僅設(shè)置這兩個(gè)屬性是不行的,還需要配合Matrix來(lái)實(shí)現(xiàn),代碼如下:
Matrix matrix = new Matrix();
// x軸放大4倍,y不變
matrix.postScale(4.0f, 1.0f);
// 設(shè)置縮放
mChart.getViewPortHandler().refresh(matrix, mChart, false);
- 2,圖表描述相關(guān)設(shè)置
// 不顯示描述數(shù)據(jù)
mChart.getDescription().setEnabled(true);
mChart.getAxisRight().setEnabled(false);
// 設(shè)置描述
mChart.getDescription().setText("text desc");
// 設(shè)置描述顯示的位置,默認(rèn)是顯示在圖表的右下角的
mChart.getDescription().setPosition(200,100);

- 3,是否顯示右側(cè)y軸
mChart.getAxisRight().setEnabled(false);

- 4, 圖例相關(guān)設(shè)置
Legend legend = mChart.getLegend();
//是否顯示
legend.setEnabled(true);
//圖例樣式:有圓點(diǎn),正方形,短線 幾種樣式
legend.setForm(Legend.LegendForm.CIRCLE);
// 圖例顯示的位置:如下2行代碼設(shè)置圖例顯示在左下角
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
// 圖例的排列方式:水平排列和豎直排列2種
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
// 圖例距離x軸的距離
legend.setXEntrySpace(10f);
//圖例距離y軸的距離
legend.setYEntrySpace(10f);
//圖例的大小
legend.setFormSize(7f);
// 圖例描述文字大小
legend.setTextSize(10);
- 5,x軸先關(guān)設(shè)置
XAxis xAxis = mChart.getXAxis();
// 是否顯示x軸線
xAxis.setDrawAxisLine(true);
// 設(shè)置x軸線的顏色
xAxis.setAxisLineColor(Color.parseColor("#4cffffff"));
// 是否繪制x方向網(wǎng)格線
xAxis.setDrawGridLines(false);
//x方向網(wǎng)格線的顏色
xAxis.setGridColor(Color.parseColor("#30FFFFFF"));
// 設(shè)置x軸數(shù)據(jù)的位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
// 設(shè)置x軸文字的大小
xAxis.setTextSize(12);
// 設(shè)置x軸數(shù)據(jù)偏移量
xAxis.setYOffset(5);
final List<String> labels = mLabels;
// 顯示x軸標(biāo)簽
IAxisValueFormatter formatter = new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int index = (int) value;
if (index < 0 || index >= labels.size()) {
return "";
}
return labels.get(index);
// return labels.get(Math.min(Math.max((int) value, 0), labels.size() - 1));
}
};
// 引用標(biāo)簽
xAxis.setValueFormatter(formatter);
// 設(shè)置x軸文字顏色
xAxis.setTextColor(mChart.getResources().getColor(R.color.char_text_color));
// 設(shè)置x軸每最小刻度 interval
xAxis.setGranularity(1f);
6,y軸先關(guān)設(shè)置
YAxis yAxis = mChart.getAxisLeft();
//設(shè)置x軸的最大值
yAxis.setAxisMaximum(yMax);
// 設(shè)置y軸的最大值
yAxis.setAxisMinimum(yMin);
// 不顯示y軸
yAxis.setDrawAxisLine(false);
// 設(shè)置y軸數(shù)據(jù)的位置
yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
// 不從y軸發(fā)出橫向直線
yAxis.setDrawGridLines(false);
// 是否顯示y軸坐標(biāo)線
yAxis.setDrawZeroLine(true);
// 設(shè)置y軸的文字顏色
yAxis.setTextColor(mChart.getResources().getColor(R.color.char_text_color));
// 設(shè)置y軸文字的大小
yAxis.setTextSize(12);
// 設(shè)置y軸數(shù)據(jù)偏移量
//yAxis.setXOffset(30);
// yAxis.setYOffset(-3);
yAxis.setXOffset(15);
// 設(shè)置y軸label 數(shù)量
yAxis.setLabelCount(5, false);
// 設(shè)置y軸的最小刻度
yAxis.setGranularity(5);//interval
- 7,縮放和動(dòng)畫設(shè)置
Matrix matrix = new Matrix();
// 根據(jù)數(shù)據(jù)量來(lái)確定 x軸縮放大倍
if (mLabels.size() <= 10) {
matrix.postScale(1.0f, 1.0f);
} else if (mLabels.size() <= 15) {
matrix.postScale(1.5f, 1.0f);
} else if (mLabels.size() <= 20) {
matrix.postScale(2.0f, 1.0f);
} else {
matrix.postScale(3.0f, 1.0f);
}
// 在圖表動(dòng)畫顯示之前進(jìn)行縮放
mChart.getViewPortHandler().refresh(matrix, mChart, false);
// x軸執(zhí)行動(dòng)畫
mChart.animateX(500);
- 8, 無(wú)數(shù)據(jù)時(shí),顯示文案
/**
* 顯示無(wú)數(shù)據(jù)的提示
*
* @param mChart
*/
public static void NotShowNoDataText(Chart mChart) {
mChart.clear();
mChart.notifyDataSetChanged();
mChart.setNoDataText("你還沒(méi)有記錄數(shù)據(jù)");
mChart.setNoDataTextColor(Color.WHITE);
// 記得最后要刷新一下
mChart.invalidate();
}
- 9,設(shè)置marker
(1)首先需要繼承MarkerView 實(shí)現(xiàn)一個(gè)自定義View
public class ChartMarkerView extends MarkerView {
private TextView textView;
/**
* Constructor. Sets up the MarkerView with a custom layout resource.
*
* @param context
* @param layoutResource the layout resource to use for the MarkerView
*/
public ChartMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
textView = (TextView) findViewById(R.id.marker_view_text);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
float value = e.getY();
textView.setText(DecimalFormatUtils.getIntOrFloatRemainOne(value));
}
@Override
public MPPointF getOffsetForDrawingAtPoint(float posX, float posY) {
return new MPPointF(-getWidth() / 2f, -getHeight() - 10);
}
}
(2), 通過(guò)addMaker 添加到圖上
combinedChart.setMarker(new ChartMarkerView(context, R.layout.chart_markerview_layout));
以上就是對(duì)Chart 的一些基礎(chǔ)設(shè)置,包括x,y軸改如何顯示(顏色、大?。?、圖例、描述等等。
下面就看看如何來(lái)繪制曲線圖呢?
數(shù)據(jù)設(shè)置
當(dāng)我們要繪制曲線圖、折線圖、和柱狀圖等等的時(shí)候,怎樣將我們要繪制的一個(gè)個(gè)數(shù)據(jù)點(diǎn)顯示在圖上的呢?MPAndroidChart 是用dataSet來(lái)表示的,我們需要將數(shù)據(jù)點(diǎn)包裝成DataSet,然后設(shè)置到Chart,刷新繪制就ok了。MPAndroidChart 庫(kù)中有很多DataSet,如下所示:

以曲線圖或者折線圖為例,我們使用LineDataSet:
/**
* 獲取LineDataSet
*
* @param entries
* @param label
* @param textColor
* @param lineColor
* @return
*/
public static LineDataSet getLineData(List<Entry> entries, String label, @ColorInt int textColor, @ColorInt int lineColor, boolean isFill) {
LineDataSet dataSet = new LineDataSet(entries, label);
// 設(shè)置曲線的顏色
dataSet.setColor(lineColor);
//數(shù)值文字顏色
dataSet.setValueTextColor(textColor);
// 模式為貝塞爾曲線
dataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
// 是否繪制數(shù)據(jù)值
dataSet.setDrawValues(false);
// 是否繪制圓點(diǎn)
dataSet.setDrawCircles(true);
dataSet.setDrawCircleHole(false);
// 這里有一個(gè)坑,當(dāng)我們想隱藏掉高亮線的時(shí)候,MarkerView 跟著不見(jiàn)了
// 因此只有將它設(shè)置成透明色
dataSet.setHighlightEnabled(true);// 隱藏點(diǎn)擊時(shí)候的高亮線
//設(shè)置高亮線為透明色
dataSet.setHighLightColor(Color.TRANSPARENT);
if (isFill) {
//是否設(shè)置填充曲線到x軸之間的區(qū)域
dataSet.setDrawFilled(true);
// 填充顏色
dataSet.setFillColor(lineColor);
}
//設(shè)置圓點(diǎn)的顏色
dataSet.setCircleColor(lineColor);
// 設(shè)置圓點(diǎn)半徑
dataSet.setCircleRadius(3.5f);
// 設(shè)置線的寬度
dataSet.setLineWidth(1f);
return dataSet;
}
將數(shù)據(jù)繪制到圖表上
如果是一條曲線,直接用LineChart 和LineData就好,如果有多條曲線,就需要用CombinedChart 和 CombinedData (混合圖、混合數(shù)據(jù))??梢允荓ineData 和BarData 混合來(lái)繪制曲線和柱狀的混合圖。
/**
* 初始化數(shù)據(jù)
*
* @param chart
* @param lineDatas
*/
public static void initData(CombinedChart chart, LineData... lineDatas) {
CombinedData combinedData = new CombinedData();
for (LineData lineData : lineDatas) {
combinedData.setData(lineData);
}
chart.setData(combinedData);
chart.invalidate();
}
最后調(diào)用invalidate 繪制。
柱狀圖
柱狀圖跟曲線圖其實(shí)是一樣的,圖表基礎(chǔ)配置一樣,然后將數(shù)據(jù)點(diǎn)包裝成BarData,最后包裝成BarDataSet。
/**
* 初始化柱狀圖圖表數(shù)據(jù)
* @param chart
* @param entries
* @param title
* @param barColor
*/
public static void initBarChart(BarChart chart, List<BarEntry> entries, String title, @ColorInt int barColor) {
BarDataSet set1 = new BarDataSet(entries, title);
set1.setValueTextColor(Color.WHITE);
set1.setColor(barColor);
ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
// 設(shè)置bar的寬度,但是點(diǎn)很多少的時(shí)候好像沒(méi)作用,會(huì)拉得很寬
data.setBarWidth(0.1f);
// 設(shè)置value值 顏色
data.setValueTextColor(Color.WHITE);
//設(shè)置y軸顯示的標(biāo)簽
data.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return ((int) (value * 100)) + "%";
}
});
chart.setData(data);
chart.invalidate();
}
工具類
項(xiàng)目中有很多出使用曲線圖和柱狀圖的地方,因此抽取了一個(gè)工具類,完整代碼如下:
public class MPChartUtils {
/**
* 不顯示無(wú)數(shù)據(jù)的提示
*
* @param mChart
*/
public static void NotShowNoDataText(Chart mChart) {
mChart.clear();
mChart.notifyDataSetChanged();
mChart.setNoDataText("你還沒(méi)有記錄數(shù)據(jù)");
mChart.setNoDataTextColor(Color.WHITE);
mChart.invalidate();
}
/**
* 配置Chart 基礎(chǔ)設(shè)置
* @param mChart 圖表
* @param mLabels x 軸標(biāo)簽
* @param yMax y 軸最大值
* @param yMin y 軸最小值
* @param isShowLegend 是否顯示圖例
*/
public static void configChart(CombinedChart mChart, List<String> mLabels, float yMax, float yMin, boolean isShowLegend) {
mChart.setDrawGridBackground(false);
mChart.setDrawBorders(false);
mChart.setScaleEnabled(false);
mChart.setDragEnabled(true);
mChart.setNoDataText("");
// 不顯示描述數(shù)據(jù)
mChart.getDescription().setEnabled(false);
mChart.getAxisRight().setEnabled(false);
Legend legend = mChart.getLegend();
// 是否顯示圖例
if (isShowLegend) {
legend.setEnabled(true);
legend.setTextColor(Color.WHITE);
legend.setForm(Legend.LegendForm.CIRCLE);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setYEntrySpace(20f);
//圖例的大小
legend.setFormSize(7f);
// 圖例描述文字大小
legend.setTextSize(10);
legend.setXEntrySpace(20f);
} else {
legend.setEnabled(false);
}
XAxis xAxis = mChart.getXAxis();
// 是否顯示x軸線
xAxis.setDrawAxisLine(true);
// 設(shè)置x軸線的顏色
xAxis.setAxisLineColor(Color.parseColor("#4cffffff"));
// 是否繪制x方向網(wǎng)格線
xAxis.setDrawGridLines(false);
//x方向網(wǎng)格線的顏色
xAxis.setGridColor(Color.parseColor("#30FFFFFF"));
// 設(shè)置x軸數(shù)據(jù)的位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
// 設(shè)置x軸文字的大小
xAxis.setTextSize(12);
// 設(shè)置x軸數(shù)據(jù)偏移量
xAxis.setYOffset(5);
final List<String> labels = mLabels;
// 顯示x軸標(biāo)簽
IAxisValueFormatter formatter = new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int index = (int) value;
if (index < 0 || index >= labels.size()) {
return "";
}
return labels.get(index);
// return labels.get(Math.min(Math.max((int) value, 0), labels.size() - 1));
}
};
// 引用標(biāo)簽
xAxis.setValueFormatter(formatter);
// 設(shè)置x軸文字顏色
xAxis.setTextColor(mChart.getResources().getColor(R.color.char_text_color));
// 設(shè)置x軸每最小刻度 interval
xAxis.setGranularity(1f);
YAxis yAxis = mChart.getAxisLeft();
//設(shè)置x軸的最大值
yAxis.setAxisMaximum(yMax);
// 設(shè)置y軸的最大值
yAxis.setAxisMinimum(yMin);
// 不顯示y軸
yAxis.setDrawAxisLine(false);
// 設(shè)置y軸數(shù)據(jù)的位置
yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
// 不從y軸發(fā)出橫向直線
yAxis.setDrawGridLines(false);
// 是否顯示y軸坐標(biāo)線
yAxis.setDrawZeroLine(true);
// 設(shè)置y軸的文字顏色
yAxis.setTextColor(mChart.getResources().getColor(R.color.char_text_color));
// 設(shè)置y軸文字的大小
yAxis.setTextSize(12);
// 設(shè)置y軸數(shù)據(jù)偏移量
//yAxis.setXOffset(30);
// yAxis.setYOffset(-3);
yAxis.setXOffset(15);
// yAxis.setGranularity(yGranularity);
yAxis.setLabelCount(5, false);
//yAxis.setGranularity(5);//interval
Matrix matrix = new Matrix();
// 根據(jù)數(shù)據(jù)量來(lái)確定 x軸縮放大倍
if (mLabels.size() <= 10) {
matrix.postScale(1.0f, 1.0f);
} else if (mLabels.size() <= 15) {
matrix.postScale(1.5f, 1.0f);
} else if (mLabels.size() <= 20) {
matrix.postScale(2.0f, 1.0f);
} else {
matrix.postScale(3.0f, 1.0f);
}
// 在圖表動(dòng)畫顯示之前進(jìn)行縮放
mChart.getViewPortHandler().refresh(matrix, mChart, false);
// x軸執(zhí)行動(dòng)畫
mChart.animateX(500);
}
/**
* 初始化數(shù)據(jù)
*
* @param chart
* @param lineDatas
*/
public static void initData(CombinedChart chart, LineData... lineDatas) {
CombinedData combinedData = new CombinedData();
for (LineData lineData : lineDatas) {
combinedData.setData(lineData);
}
chart.setData(combinedData);
chart.invalidate();
}
/**
* 獲取LineDataSet
*
* @param entries
* @param label
* @param textColor
* @param lineColor
* @return
*/
public static LineDataSet getLineData(List<Entry> entries, String label, @ColorInt int textColor, @ColorInt int lineColor, boolean isFill) {
LineDataSet dataSet = new LineDataSet(entries, label);
// 設(shè)置曲線的顏色
dataSet.setColor(lineColor);
//數(shù)值文字顏色
dataSet.setValueTextColor(textColor);
// 模式為貝塞爾曲線
dataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
// 是否繪制數(shù)據(jù)值
dataSet.setDrawValues(false);
// 是否繪制圓點(diǎn)
dataSet.setDrawCircles(true);
dataSet.setDrawCircleHole(false);
// 這里有一個(gè)坑,當(dāng)我們想隱藏掉高亮線的時(shí)候,MarkerView 跟著不見(jiàn)了
// 因此只有將它設(shè)置成透明色
dataSet.setHighlightEnabled(true);// 隱藏點(diǎn)擊時(shí)候的高亮線
//設(shè)置高亮線為透明色
dataSet.setHighLightColor(Color.TRANSPARENT);
if (isFill) {
//是否設(shè)置填充曲線到x軸之間的區(qū)域
dataSet.setDrawFilled(true);
// 填充顏色
dataSet.setFillColor(lineColor);
}
//設(shè)置圓點(diǎn)的顏色
dataSet.setCircleColor(lineColor);
// 設(shè)置圓點(diǎn)半徑
dataSet.setCircleRadius(3.5f);
// 設(shè)置線的寬度
dataSet.setLineWidth(1f);
return dataSet;
}
/**
* 獲取barDataSet
* @param entries
* @param label
* @param textColor
* @param lineColor
* @return
*/
public static BarDataSet getBarDataSet(List<BarEntry> entries, String label, @ColorInt int textColor, @ColorInt int lineColor) {
BarDataSet dataSet = new BarDataSet(entries, label);
dataSet.setBarBorderWidth(5);
dataSet.setBarShadowColor(lineColor);
dataSet.setValueTextColor(textColor);
dataSet.setDrawValues(false);
return dataSet;
}
/**
* 配置柱狀圖基礎(chǔ)設(shè)置
* @param barChart
* @param xLabels
*/
public static void configBarChart(BarChart barChart, final List<String> xLabels) {
barChart.getDescription().setEnabled(false);//設(shè)置描述
barChart.setPinchZoom(false);//設(shè)置按比例放縮柱狀圖
barChart.setScaleEnabled(false);
barChart.setDragEnabled(true);
barChart.setNoDataText(""); // 沒(méi)有數(shù)據(jù)時(shí)的提示文案
//x坐標(biāo)軸設(shè)置
// IAxisValueFormatter xAxisFormatter = new StringAxisValueFormatter(xAxisValue);//設(shè)置自定義的x軸值格式化器
XAxis xAxis = barChart.getXAxis();//獲取x軸
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設(shè)置X軸標(biāo)簽顯示位置
xAxis.setDrawGridLines(false);//不繪制格網(wǎng)線
xAxis.setGranularity(1f);//設(shè)置最小間隔,防止當(dāng)放大時(shí),出現(xiàn)重復(fù)標(biāo)簽。
// 顯示x軸標(biāo)簽
IAxisValueFormatter formatter = new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return xLabels.get(Math.min(Math.max((int) value, 0), xLabels.size() - 1));
}
};
xAxis.setValueFormatter(formatter);
xAxis.setTextSize(10);//設(shè)置標(biāo)簽字體大小
xAxis.setTextColor(barChart.getResources().getColor(R.color.char_text_color));
xAxis.setAxisLineColor(Color.parseColor("#4cffffff"));
xAxis.setLabelCount(xLabels.size());//設(shè)置標(biāo)簽顯示的個(gè)數(shù)
//y軸設(shè)置
YAxis leftAxis = barChart.getAxisLeft();//獲取左側(cè)y軸
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);//設(shè)置y軸標(biāo)簽顯示在外側(cè)
leftAxis.setAxisMinimum(0f);//設(shè)置Y軸最小值
leftAxis.setDrawGridLines(false);
leftAxis.setDrawLabels(true);//禁止繪制y軸標(biāo)簽
leftAxis.setDrawAxisLine(false);//禁止繪制y軸
leftAxis.setAxisLineColor(Color.parseColor("#4cffffff"));
leftAxis.setTextColor(barChart.getResources().getColor(R.color.char_text_color));
leftAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return ((int) (value * 100)) + "%";
}
});
barChart.getAxisRight().setEnabled(false);//禁用右側(cè)y軸
barChart.getLegend().setEnabled(false);
//圖例設(shè)置
/* Legend legend = barChart.getLegend();
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);//圖例水平居中
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);//圖例在圖表上方
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);//圖例的方向?yàn)樗? legend.setDrawInside(false);//繪制在chart的外側(cè)
legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);//圖例中的文字方向
legend.setForm(Legend.LegendForm.SQUARE);//圖例窗體的形狀
legend.setFormSize(0f);//圖例窗體的大小
legend.setTextSize(16f);//圖例文字的大小*/
//legend.setYOffset(-2f);
Matrix matrix = new Matrix();
// 根據(jù)數(shù)據(jù)量來(lái)確定 x軸縮放大倍
if (xLabels.size() <= 10) {
matrix.postScale(1.0f, 1.0f);
} else if (xLabels.size() <= 15) {
matrix.postScale(1.5f, 1.0f);
} else if (xLabels.size() <= 20) {
matrix.postScale(2.0f, 1.0f);
} else {
matrix.postScale(3.0f, 1.0f);
}
barChart.getViewPortHandler().refresh(matrix, barChart, false);
barChart.setExtraBottomOffset(10);//距視圖窗口底部的偏移,類似與paddingbottom
barChart.setExtraTopOffset(30);//距視圖窗口頂部的偏移,類似與paddingtop
barChart.setFitBars(true);//使兩側(cè)的柱圖完全顯示
barChart.animateX(1500);//數(shù)據(jù)顯示動(dòng)畫,從左往右依次顯示
}
/**
* 初始化柱狀圖圖表數(shù)據(jù)
* @param chart
* @param entries
* @param title
* @param barColor
*/
public static void initBarChart(BarChart chart, List<BarEntry> entries, String title, @ColorInt int barColor) {
BarDataSet set1 = new BarDataSet(entries, title);
set1.setValueTextColor(Color.WHITE);
set1.setColor(barColor);
ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
// 設(shè)置bar的寬度,但是點(diǎn)很多少的時(shí)候好像沒(méi)作用,會(huì)拉得很寬
data.setBarWidth(0.1f);
// 設(shè)置value值 顏色
data.setValueTextColor(Color.WHITE);
//設(shè)置y軸顯示的標(biāo)簽
data.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return ((int) (value * 100)) + "%";
}
});
chart.setData(data);
chart.invalidate();
}
}
最終使用
最后,調(diào)用工具類的三個(gè)方法,三行代碼就ok :
// 1.配置基礎(chǔ)圖表配置
MPChartUtils.configChart(mWeightChart, xLabels, maxWeight, minWeight, true);
// 2,獲取數(shù)據(jù)Data,這里有2條曲線
LineDataSet tartgetDataSet = MPChartUtils.getLineData(targetEntries, "目標(biāo)體重", Color.WHITE, Color.WHITE, false);
LineDataSet lineDataSet = MPChartUtils.getLineData(weightEntries, "當(dāng)前體重", Color.WHITE, getResources().getColor(R.color.chart_dot_color), false);
// 3,初始化數(shù)據(jù)并繪制
MPChartUtils.initData(mWeightChart, new LineData(lineDataSet, tartgetDataSet));




