MPAndroidChart 在 GitHub 上具有很高的 star,我们也经常在项目中遇到绘制图表的场景,此篇对 LineChart 的属性,功能等进行总结。
源代码项目地址
github.com/PhilJay/MPA…
引入方式
当前最新版本为 3.1.0
repositories {
maven { url 'https:
}
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}
LineChart 组件
在 xml 文件中,引用 LineChart 组件。
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="500dp"/>
属性
Chart(图表)属性
属性方法 | 功能 |
---|
setBackgroundColor() | 背景色 |
setBackgroundResource() | 背景资源 |
setTouchEnabled() | 手指点击是否可以选中点 |
setDrawGridBackground() | 是否绘制网格背景 |
setGridBackgroundColor() | 绘制网格背景颜色 |
setViewPortOffsets() | 曲线内容的位置偏移量 |
resetViewPortOffsets() | 曲线内容的位置偏移量重置 |
setAutoScaleMinMaxEnabled() | 是否可以根据最大值和最小值自动缩放 |
setDragEnabled() | 是否可以拖拽 |
setDragXEnabled() | X 轴是否可以拖拽 |
setDragYEnabled() | Y 轴是否可以拖拽 |
setDragOffsetX() | 拖拽曲线的 X 轴偏移量 |
setDragOffsetY() | 拖拽曲线的 Y 轴偏移量 |
setScaleEnabled() | 是否可以缩放 |
setScaleMinima() | 设置缩放最小倍数 |
setScaleXEnabled() | 是否可以 X 轴缩放 |
setScaleYEnabled() | 是否可以 Y 轴缩放 |
setPinchZoom() | 是否可以双指缩放 |
setDoubleTapToZoomEnabled() | 是否可以双击放大 |
setOnChartValueSelectedListener() | 选中点(数据)的监听事件 |
setData() | 数据添加到图表中 |
moveViewToX() | 移动到指定 X 轴的位置 |
moveViewTo() | 移动到指定点的位置 |
moveViewToAnimated() | 移动到指定点的位置 |
highlightValue() | 高亮值 |
notifyDataSetChanged() | 刷新数据 |
invalidate() | 重绘 |
chart.setBackgroundColor(Color.TRANSPARENT);
chart.setBackgroundResource(R.drawable.shape_gradient_fff5ee_e6e6fa);
chart.setTouchEnabled(true);
chart.setDrawGridBackground(true);
chart.setGridBackgroundColor(Color.parseColor("#509370DB"));
chart.setViewPortOffsets(50f, 50f, 50f, 50f);
chart.resetViewPortOffsets();
chart.setAutoScaleMinMaxEnabled(true);
chart.setDragEnabled(true);
chart.setDragXEnabled(true);
chart.setDragYEnabled(true);
chart.setDragOffsetX(100f);
chart.setDragOffsetY(20f);
chart.setScaleEnabled(false);
chart.setScaleMinima(1f,1f);
chart.setScaleXEnabled(true);
chart.setScaleYEnabled(false);
chart.setPinchZoom(true);
chart.setDoubleTapToZoomEnabled(true);
chart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry e, Highlight h) {
}
@Override
public void onNothingSelected() {
}
});
chart.setData(data);
chart.moveViewToX(values.get(values.size() - 1).getX());
chart.moveViewTo(values.get(values.size() - 1).getX(), values.get(values.size() - 1).getY(), YAxis.AxisDependency.RIGHT);
chart.moveViewToAnimated(entryList.get(entryList.size() - 1).getX(), entryList.get(entryList.size() - 1).getY(), YAxis.AxisDependency.RIGHT,5000);
chart.highlightValue(new Highlight(values.get(values.size() - 1).getX(), values.get(values.size() - 1).getY(), 0));
chart.notifyDataSetChanged();
chart.invalidate();
Description (文本描述)属性
属性方法 | 功能 |
---|
setEnabled() | 是否显示 |
setText() | 描述内容 |
setPosition() | 位置 |
setTextSize() | 字体大小 |
setTextColor() | 字体颜色 |
setTypeface() | 字重 |
setTextAlign() | 内容位置 |
setXOffset() | 左右的偏移量 |
setYOffset() | 上下的偏移量 |
Description description = chart.getDescription();
description.setEnabled(false);
description.setText("描述内容");
description.setPosition(150f,40f);
description.setTextSize(12);
description.setTextColor(Color.parseColor("#8A2BE2"));
description.setTypeface(Typeface.DEFAULT_BOLD);
description.setTextAlign(Paint.Align.RIGHT);
description.setXOffset(-12f);
description.setYOffset(-13f);
ViewPortHandler(可视区域)属性
属性方法 | 功能 |
---|
getMatrixTouch().postScale() | XY 轴缩放 |
setMaximumScaleX() | X 轴最大能放大到几倍 |
setMinimumScaleX() | X 轴最小能缩小到几倍 |
setMaximumScaleY() | Y 轴最大能放大到几倍 |
setMinimumScaleY() | Y 轴最小能缩小到几倍 |
setMinMaxScaleX() | X 轴放大缩小倍数 |
setMinMaxScaleY() | Y 轴放大缩小倍数 |
setDragOffsetX() | 拖拽曲线的 X 轴偏移量 |
setDragOffsetY() | 拖拽曲线的 Y 轴偏移量 |
ViewPortHandler viewPortHandler = chart.getViewPortHandler();
viewPortHandler.getMatrixTouch().postScale(3f, 1f);
viewPortHandler.setMaximumScaleX(10f);
viewPortHandler.setMinimumScaleX(2f);
viewPortHandler.setMaximumScaleY(5f);
viewPortHandler.setMinimumScaleY(2f);
viewPortHandler.setMinMaxScaleX(2,10);
viewPortHandler.setMinMaxScaleY(2,5);
viewPortHandler.setDragOffsetX(100f);
viewPortHandler.setDragOffsetY(50f);
Legend(标志)属性
属性方法 | 功能 |
---|
setEnabled() | 是否显示 |
setDirection() | 方块在文字的位置 |
setTextSize() | 文字大小 |
setTextColor() | 文字颜色 |
setTypeface() | 文字字重 |
setForm() | 标志形状 |
setFormSize() | 标志大小 |
setFormToTextSpace() | 标志与文字间距 |
setFormLineWidth() | 线宽 |
setFormLineDashEffect() | 标志虚线 |
setOrientation() | 标志排序 |
setVerticalAlignment() | 竖排位置 |
setHorizontalAlignment() | 横排位置 |
setWordWrapEnabled() | 是否允许换行 |
setMaxSizePercent() | 整个图表视图中的最大相对大小 |
setXOffset() | 左右的偏移量 |
setYOffset() | 上下的偏移量 |
setCustom() | 自定义标志 |
Legend legend = chart.getLegend();
legend.setEnabled(true);
legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);
legend.setTextSize(11);
legend.setTextColor(Color.BLACK);
legend.setTypeface(Typeface.SERIF);
legend.setForm(Legend.LegendForm.LINE);
legend.setFormSize(11);
legend.setFormToTextSpace(5);
legend.setFormLineWidth(1);
legend.setFormLineDashEffect(new DashPathEffect(new float[]{2, 3}, 1));
legend.setOrientation(Legend.LegendOrientation.VERTICAL);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
legend.setWordWrapEnabled(true);
legend.setMaxSizePercent(0.5f);
legend.setXOffset(5);
legend.setYOffset(5);
List<LegendEntry> legends = new ArrayList<>();
LegendEntry entry = new LegendEntry();
entry.label = "标志1";
entry.formColor = R.color.purple_200;
legends.add(entry);
legend.setCustom(legends);
XAxis(X 轴)属性
属性方法 | 功能 |
---|
setEnabled() | 是否显示 |
setDrawGridLines() | 网格线是否绘制 |
enableGridDashedLine() | 网格线虚线 |
setGridDashedLine() | 网格线虚线 |
setGridColor() | 网格线颜色 |
setGridLineWidth() | 网格线线宽 |
setDrawGridLinesBehindData() | 网格线是否在数据后面绘制 |
setDrawAxisLine() | 是否绘制 X 轴线 |
setAxisLineColor() | X 轴线的颜色 |
setAxisLineDashedLine() | X 轴线为虚线 |
enableAxisLineDashedLine() | X 轴线为虚线 |
setAxisLineWidth() | X 轴线的线宽 |
setDrawLabels() | 是否绘制内容 |
setLabelRotationAngle() | 设置内容的角度 |
setCenterAxisLabels() | 内容是否居中 |
setLabelCount() | 设置内容显示多少个 |
setTextColor() | 字体颜色 |
setTextSize() | 字体大小 |
setTypeface() | 字体字重 |
setGranularityEnabled() | 是否启用放大后的间隔控制 |
setGranularity() | 放大后间隔 |
setPosition() | X 轴内容的位置 |
setYOffset() | 上下的偏移量 |
setXOffset() | 左右的偏移量 |
setAxisMinimum() | X 轴最小值 |
setAxisMaximum() | X 轴最大值 |
setAvoidFirstLastClipping() | 是否避免第一个和最后一个数据不显示 |
setDrawLimitLinesBehindData() | 限制线是否绘制在数据后面 |
setValueFormatter() | 值格式化 |
addLimitLine() | 增加限制线 |
removeAllLimitLines() | X 轴移除所有限制线 |
removeLimitLine() | 指定移除某条限制线 |
XAxis xAxis = chart.getXAxis();
xAxis.setEnabled(true);
xAxis.setDrawGridLines(true);
xAxis.enableGridDashedLine(10f, 10f, 0f);
xAxis.setGridDashedLine(new DashPathEffect(new float[]{10,10},0));
xAxis.setGridColor(Color.parseColor("#AB82FF"));
xAxis.setGridLineWidth(1);
xAxis.setDrawGridLinesBehindData(true);
xAxis.setDrawAxisLine(true);
xAxis.setAxisLineColor(Color.parseColor("#7D26CD"));
xAxis.setAxisLineDashedLine(new DashPathEffect(new float[]{8f, 5f}, 0f));
xAxis.enableAxisLineDashedLine(8, 5, 0);
xAxis.setAxisLineWidth(2);
xAxis.setDrawLabels(true);
xAxis.setLabelRotationAngle(45);
xAxis.setCenterAxisLabels(false);
xAxis.setLabelCount(5);
xAxis.setTextColor(Color.parseColor("#AB82FF"));
xAxis.setTextSize(11);
xAxis.setTypeface(Typeface.DEFAULT_BOLD);
xAxis.setGranularityEnabled(true);
xAxis.setGranularity(1);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setYOffset(1f);
xAxis.setXOffset(0f);
xAxis.setAxisMinimum(-10);
xAxis.setAxisMaximum(60);
xAxis.setAvoidFirstLastClipping(true);
xAxis.setDrawLimitLinesBehindData(true);
xAxis.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return String.valueOf((int) value);
}
});
xAxis.addLimitLine(limitLine);
xAxis.removeAllLimitLines();
xAxis.removeLimitLine();
YAxis(Y 轴)属性
属性方法 | 功能 |
---|
setEnabled() | 是否显示 |
setDrawGridLines() | 网格线是否绘制 |
enableGridDashedLine() | 网格线虚线 |
setGridDashedLine() | 网格线虚线 |
setGridColor() | 网格线颜色 |
setGridLineWidth() | 网格线线宽 |
setDrawGridLinesBehindData() | 网格线是否在数据后面绘制 |
setDrawAxisLine() | Y 轴线是否绘制 |
setAxisLineDashedLine() | Y 轴线虚线 |
enableAxisLineDashedLine() | Y 轴线虚线 |
setAxisLineColor() | Y 轴线颜色 |
setAxisLineWidth() | Y 轴线线宽 |
setTextColor() | 字体颜色 |
setTextSize() | 字体大小 |
setTypeface() | 字体字重 |
setDrawLabels() | 是否绘制内容 |
setDrawTopYLabelEntry() | 是否绘制顶部内容 |
setCenterAxisLabels() | 内容是否居中 |
setLabelCount() | 设置内容显示多少个 |
setDrawZeroLine() | 是否绘制 0 线 |
setZeroLineColor() | 0 线颜色 |
setZeroLineWidth() | 0 线线宽 |
setGranularityEnabled() | 是否启用放大后的间隔控制 |
setGranularity() | 放大后间隔 |
setPosition() | Y 轴内容位置 |
setXOffset() | 左右的偏移量 |
setYOffset() | 上下的偏移量 |
setMaxWidth() | 放大后间隔 |
setMinWidth() | y 轴最小的宽度 |
setAxisMaximum() | Y 轴最大值 |
setAxisMinimum() | Y 轴最小值 |
setValueFormatter() | 值格式化 |
setInverted() | Y 轴数据镜像 |
setDrawLimitLinesBehindData() | 限制线是否绘制在数据后面 |
addLimitLine() | 增加限制线 |
removeAllLimitLines() | X 轴移除所有限制线 |
removeLimitLine() | 指定移除某条限制线 |
YAxis yAxisRight = chart.getAxisRight();
YAxis yAxisLeft = chart.getAxisLeft();
yAxisRight.setEnabled(true);
yAxisRight.setDrawGridLines(true);
yAxisRight.enableGridDashedLine(10f, 10f, 0f);
yAxisRight.setGridDashedLine(new DashPathEffect(new float[]{10, 10}, 0));
yAxisRight.setGridColor(Color.parseColor("#4876FF"));
yAxisRight.setGridLineWidth(1);
yAxisRight.setDrawGridLinesBehindData(true);
yAxisRight.setDrawAxisLine(true);
yAxisRight.setAxisLineDashedLine(new DashPathEffect(new float[]{10f, 10f}, 0f));
yAxisRight.enableAxisLineDashedLine(10,10,0);
yAxisRight.setAxisLineColor(Color.parseColor("#DA70D6"));
yAxisRight.setAxisLineWidth(1);
yAxisRight.setTextColor(Color.parseColor("#DA70D6"));
yAxisRight.setTextSize(11);
yAxisRight.setTypeface(Typeface.DEFAULT_BOLD);
yAxisRight.setDrawLabels(true);
yAxisRight.setDrawTopYLabelEntry(true);
yAxisRight.setCenterAxisLabels(false);
yAxisRight.setLabelCount(10);
yAxisRight.setDrawZeroLine(true);
yAxisRight.setZeroLineColor(Color.parseColor("#FFA500"));
yAxisRight.setZeroLineWidth(2);
yAxisRight.setGranularityEnabled(true);
yAxisRight.setGranularity(5);
yAxisRight.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
yAxisRight.setXOffset(4f);
yAxisRight.setYOffset(0f);
yAxisRight.setMaxWidth(50);
yAxisRight.setMinWidth(10);
yAxisRight.setAxisMaximum(110f);
yAxisRight.setAxisMinimum(-10);
yAxisRight.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return String.valueOf((int) value);
}
});
yAxisRight.setInverted(false);
yAxisRight.setDrawLimitLinesBehindData(true);
yAxisRight.addLimitLine(limitLine);
yAxisRight.removeAllLimitLines();
yAxisRight.removeLimitLine();
LineDataSet/iLineDataSet(数据集)属性
属性方法 | 功能 |
---|
setVisible() | 曲线是否可见 |
setLabel() | 曲线名 |
setMode() | 绘制模式(折线,方框,圆弧) |
enableDashedLine() | 曲线为虚线 |
disableDashedLine() | 曲线不是虚线 |
setColor() | 曲线颜色 |
setColors() | 曲线多种颜色 |
addColor() | 曲线增加颜色 |
setLineWidth() | 曲线线宽 |
setDrawCircles() | 圆点是否绘制 |
setCircleColor() | 圆圈颜色 |
setCircleRadius() | 圆圈半径 |
setDrawCircleHole() | 圆圈是否空心 |
setCircleHoleColor() | 圆圈空心颜色 |
setCircleHoleRadius() | 圆圈空心半径 |
setCircleColors() | 圆圈多种颜色 |
setDrawFilled() | 曲线到 X 轴的是否填充 |
setFillDrawable() | 曲线到 X 轴的填充资源 |
setFillAlpha() | 曲线到 X 轴的填充透明度(0,255) |
setFillColor() | 曲线到 X 轴的填充颜色 |
setDrawValues() | 值是否绘制 |
setValueTextColor() | 值字体颜色 |
setValueTextSize() | 值字体大小 |
setValueTypeface() | 值字体字重 |
setValueTextColors() | 是否显示折线上的点数据 |
setValueFormatter() | 值格式化 |
setHighlightEnabled() | 高亮点是否可以绘制 |
setDrawHighlightIndicators() | 高亮点的横竖线 |
setDrawVerticalHighlightIndicator() | 高亮点的竖线 |
setDrawHorizontalHighlightIndicator() | 高亮点的横线 |
setHighLightColor() | 高亮点的横竖线颜色 |
setHighlightLineWidth() | 高亮点的横竖线宽度 |
enableDashedHighlightLine() | 高亮点的线设置成虚线 |
setForm() | 标志(legend)形状 |
setFormSize() | 标志(legend)大小 |
setFormLineWidth() | 标志(legend)线宽 |
setFormLineDashEffect() | 标志(legend)虚线 |
setDrawIcons() | 图片是否绘制 |
setIconsOffset() | 图片位置 |
removeEntry() | 移除指定的 Entry |
removeFirst() | 移除第一个数据 |
removeLast() | 移除最后一个数据 |
removeEntry() | 移除索引值的数据 |
removeEntryByXValue() | 移除值为目标值的数据 |
clear() | 清空所有数据 |
getXMax() | 获取 X 轴最大值 |
getXMin() | 获取 X 轴最小值 |
getYMin() | 获取 Y 轴最小值 |
getYMax() | 获取 Y 轴最大值 |
LineDataSet lineDataSet = new LineDataSet(values, "曲线0");
lineDataSet.setVisible(true);
lineDataSet.setLabel("基础线");
lineDataSet.setMode(LineDataSet.Mode.LINEAR);
lineDataSet.enableDashedLine(8f, 5f, 0f);
lineDataSet.disableDashedLine();
lineDataSet.setColor(Color.parseColor("#66CD00"));
lineDataSet.setColors(Color.RED, Color.GREEN);
lineDataSet.addColor(Color.BLUE);
lineDataSet.setLineWidth(2f);
lineDataSet.setDrawCircles(true);
lineDataSet.setCircleColor(Color.YELLOW);
lineDataSet.setCircleRadius(3f);
lineDataSet.setDrawCircleHole(true);
lineDataSet.setCircleHoleColor(Color.RED);
lineDataSet.setCircleHoleRadius(1f);
lineDataSet.setCircleColors(Color.RED,Color.BLUE);
lineDataSet.setDrawFilled(true);
lineDataSet.setFillDrawable(getResources().getDrawable(R.drawable.shape_gradient_9066cd00_3066cd00));
lineDataSet.setFillAlpha(150);
lineDataSet.setFillColor(Color.parseColor("#66cd00"));
lineDataSet.setDrawValues(true);
lineDataSet.setValueTextColor(Color.parseColor("#FF6A6A"));
lineDataSet.setValueTextSize(9);
lineDataSet.setValueTypeface(Typeface.SANS_SERIF);
List<Integer> colors = new ArrayList<>();
colors.add(Color.RED);
colors.add(Color.BLUE);
lineDataSet.setValueTextColors(colors);
lineDataSet.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return String.valueOf(value);
}
});
lineDataSet.setHighlightEnabled(true);
lineDataSet.setDrawHighlightIndicators(false);
lineDataSet.setDrawVerticalHighlightIndicator(true);
lineDataSet.setDrawHorizontalHighlightIndicator(true);
lineDataSet.setHighLightColor(Color.parseColor("#1E90FF"));
lineDataSet.setHighlightLineWidth(1f);
lineDataSet.enableDashedHighlightLine(8f, 5f, 0f);
lineDataSet.setForm(Legend.LegendForm.LINE);
lineDataSet.setFormSize(11);
lineDataSet.setFormLineWidth(1);
lineDataSet.setFormLineDashEffect(new DashPathEffect(new float[]{2, 3}, 1));
lineDataSet.setDrawIcons(true);
lineDataSet.setIconsOffset(new MPPointF(0,10));
iLineDataSet.removeEntry(new Entry());
iLineDataSet.removeFirst();
iLineDataSet.removeLast();
iLineDataSet.removeEntry(40);
iLineDataSet.removeEntryByXValue(50);
iLineDataSet.clear();
iLineDataSet.calcMinMax();
Log.e("max===x", iLineDataSet.getXMax() + "");
Log.e("min===x", iLineDataSet.getXMin() + "");
Log.e("min===y", iLineDataSet.getYMin() + "");
Log.e("max===y", iLineDataSet.getYMax() + "");
LineData(线数据)属性
属性方法 | 功能 |
---|
setDrawValues() | 值是否绘制 |
setValueTextColor() | 值字体颜色 |
setValueTextSize() | 值字体大小 |
setValueTypeface() | 值字体字重 |
setValueTextColors() | 是否显示折线上的点数据 |
setValueFormatter() | 值格式化 |
setHighlightEnabled() | 高亮点是否可以绘制 |
notifyDataChanged() | 刷新数据 |
addDataSet() | 新增曲线 |
removeDataSet() | 删除曲线 |
getDataSetByLabel() | 根据 label 获取 ILineDataSet |
getDataSets() | 获取曲线列表 |
addEntry() | 新增点数据 |
lineData.setDrawValues(true);
lineData.setValueTextColor(Color.parseColor("#FF6A6A"));
lineData.setValueTextSize(9);
lineData.setValueTypeface(Typeface.SANS_SERIF);
List<Integer> colors = new ArrayList<>();
colors.add(Color.RED);
colors.add(Color.BLUE);
lineData.setValueTextColors(colors);
lineData.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return String.valueOf(value);
}
});
lineData.setHighlightEnabled(true);
lineData.notifyDataChanged();
lineData.addDataSet(lineDataSet);
lineData.removeDataSet(iLineDataSet);
lineData.removeDataSet(0);
ILineDataSet iLineDataSet = lineData.getDataSetByLabel(label, true);
List<ILineDataSet> iLineDataSets = lineData.getDataSets();
lineData.addEntry(new Entry(50,66),0);
Entry(数据)属性
属性方法 | 功能 |
---|
setX() | x 轴对应数据 |
setY() | y 轴对应数据 |
setData() | 额外的说明 |
setIcon() | 图片 |
Entry entry = new Entry();
entry.setX(1);
entry.setY(10);
entry.setData("特殊说明");
entry.setIcon(getResources().getDrawable(R.mipmap.ic_yes));
LimitLine(限制线)属性
属性方法 | 功能 |
---|
setEnabled() | 是否绘制 |
setLineColor() | 线颜色 |
setLineWidth() | 线宽 |
setLabel() | 内容 |
setTextColor() | 内容颜色 |
setTextSize() | 内容字体大小 |
setTypeface() | 内容字体字重 |
setTextStyle() | 内容样式 |
setLabelPosition() | 内容在线的位置 |
LimitLine limitLine = new LimitLine(40f, "X轴限制线");
limitLine.setEnabled(true);
limitLine.setLineColor(Color.parseColor("#7A67EE"));
limitLine.setLineWidth(2f);
limitLine.setLabel("X轴限制线");
limitLine.setTextColor(Color.parseColor("#7A67EE"));
limitLine.setTextSize(6f);
limitLine.setTypeface(Typeface.DEFAULT_BOLD);
limitLine.setTextStyle(Paint.Style.STROKE);
limitLine.setLabelPosition(LimitLine.LimitLabelPosition.LEFT_BOTTOM);
项目 github 地址
github.com/ElaineTaylo…
若帅哥美女对该系列文章感兴趣,可微信搜索公众号(木子闲集)关注更多更新文章哦,谢谢~