MPAndroidChart的使用
MPAndroidChart的回顾具体使用套路(对柱状图的分析)基本参数的设置X轴的设置Y轴设置图例的设置数据的设置总结
MPAndroidChart的回顾
前面写过柱状图的使用,MPAndroidChart可以用于多种图表的展示。可以直接gitHub上查找并查看使用方法。
gitHub地址:https://github.com/PhilJay/MPAndroidChart
具体使用套路(对柱状图的分析)
使用的规律,不管是哪种图表,我都分为基本参数的设置、X轴的设置、Y轴的设置、图例的设置、数据的设置。对这几种设置完成后也就完成了。
官方文档也对这些进行了讲解。有使用文档和相关的api文档。
点击使用文档进入
基本参数的设置
我说的基本参数的设定是直接对Chart(所有图标类的基类)进行设置。
// 设置点击数值监听
mChart.setOnChartValueSelectedListener(this);
//设置阴影背景(无)
mChart.setDrawBarShadow(false);
// 设置数值是否在bar的上面
mChart.setDrawValueAboveBar(true);
mChart.setHighlightPerDragEnabled(false);
// 设置描述说明
mChart.getDescription().setEnabled(false);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
mChart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
mChart.setPinchZoom(false);
// 设置网格背景
mChart.setDrawGridBackground(false);
X轴的设置
X轴可以是数字,也可以是字符串。一般X轴都表示一些“单位”或者一些类别
X轴的基本设置
// 对X轴数据的格式规定
IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart);
// 获取到X轴的XAxis
XAxis xAxis = mChart.getXAxis();
// 设置位置
xAxis.setPosition(XAxisPosition.BOTTOM);
// 设置显示字体
xAxis.setTypeface(mTfLight);
// 是否显示X的网格线
xAxis.setDrawGridLines(false);
// 设置间隔
xAxis.setGranularity(1f); // only intervals of 1 day
// 初始显示多少个
xAxis.setLabelCount(7);
// 传入格式对象
xAxis.setValueFormatter(xAxisFormatter);
X轴的数据格式
自定义的格式,需要继承IAxisValueFormatter类。该类方法返回一个字符串。如果数值是数值,我们直接将回调的value格式化String就可以作为返回,当然也需要看自己的需求。在String getFormattedValue(float value, AxisBase axis)的方法体中重写自己的逻辑,返回字符串。
/**
* Created by Philipp Jahoda on 20/09/15.
* Custom formatter interface that allows formatting of
* axis labels before they are being drawn.
*/
public interface IAxisValueFormatter
{
/**
* Called when a value from an axis is to be formatted
* before being drawn. For performance reasons, avoid excessive calculations
* and memory allocations inside this method.
*
* @param value the value to be formatted
* @param axis the axis the value belongs to
* @return
*/
String getFormattedValue(float value, AxisBase axis);
}
demo的自定义格式
这是demo中提供的对Y轴的一个格式。以为X轴提供的一个自定义格式代码太长了。我就没有选它贴。
public class MyAxisValueFormatter implements IAxisValueFormatter
{
private DecimalFormat mFormat;
public MyAxisValueFormatter() {
mFormat = new DecimalFormat("###,###,###,##0.0");
}
@Override
public String getFormattedValue(float value, AxisBase axis) {
return mFormat.format(value) + "人";
}
}
Y轴设置
Y轴的设置和X轴的设置一个样的。但是Y轴分了左右。Y轴一般都是数据的数量了,格式化后一般都加个数量单位。
// Y轴的左轴
YAxis leftAxis = mChart.getAxisLeft();
// Y轴的右轴
YAxis rightAxis = mChart.getAxisRight();
//leftAxis.setTypeface(mTfLight);
leftAxis.setLabelCount(8, false);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
图例的设置
图例是是对每一项的X数据进行说明的,可以设置位置方向。
下面是图例的基本设置,图例的文字是在设置数据的额时候更新的
Legend l = mChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setForm(LegendForm.SQUARE);
l.setFormSize(9f);
l.setTextSize(11f);
l.setXEntrySpace(4f);
数据的设置
柱状图的数据形式,在BarEntry中存储,多组数据用List表示。接收数据用BarDataSet,然后设置进BarChart中
ArrayList yVals1 = new ArrayList();
BarDataSet set1;
if (mChart.getData() != null &&
mChart.getData().getDataSetCount() > 0) {
set1 = (BarDataSet) mChart.getData().getDataSetByIndex(0);
set1.setValues(yVals1);
mChart.getData().notifyDataChanged();
mChart.notifyDataSetChanged();
} else {
set1 = new BarDataSet(yVals1, "The year 2017");
set1.setDrawIcons(false);
// region 注释掉的颜色设置和Gradle的api不一致
// set1.setColors(ColorTemplate.MATERIAL_COLORS);
/*int startColor = ContextCompat.getColor(this, android.R.color.holo_blue_dark);
int endColor = ContextCompat.getColor(this, android.R.color.holo_blue_bright);
set1.setGradientColor(startColor, endColor);*/
/*int startColor1 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
int startColor2 = ContextCompat.getColor(this, android.R.color.holo_blue_light);
int startColor3 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
int startColor4 = ContextCompat.getColor(this, android.R.color.holo_green_light);
int startColor5 = ContextCompat.getColor(this, android.R.color.holo_red_light);
int endColor1 = ContextCompat.getColor(this, android.R.color.holo_blue_dark);
int endColor2 = ContextCompat.getColor(this, android.R.color.holo_purple);
int endColor3 = ContextCompat.getColor(this, android.R.color.holo_green_dark);
int endColor4 = ContextCompat.getColor(this, android.R.color.holo_red_dark);
int endColor5 = ContextCompat.getColor(this, android.R.color.holo_orange_dark);
List gradientColors = new ArrayList<>();
gradientColors.add(new GradientColor(startColor1, endColor1));
gradientColors.add(new GradientColor(startColor2, endColor2));
gradientColors.add(new GradientColor(startColor3, endColor3));
gradientColors.add(new GradientColor(startColor4, endColor4));
gradientColors.add(new GradientColor(startColor5, endColor5));*/
// endregion
/**
* 设置颜色,设置进去后和柱状的颜色是一致的,理论上是多少种数据设置多少
* 种颜色来区分
*/
set1.setColors(ColorTemplate.MATERIAL_COLORS);
ArrayList dataSets = new ArrayList();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setValueTypeface(mTfLight);
data.setBarWidth(0.9f);
// 设置数据
mChart.setData(data);
总结
demo通过上面的几步,一个图形也就基本可以了。在数据设置的时候,需要将你的数据类型抽取数据设置到BarEntry中,其他的图标也是这个方式套路。是在不懂多看几遍demo。跟着demo走,基本的功能都是可以完成的。当然,还有X轴和Y轴的动画,这个就看完档和demo。
一起进步
如果你觉得,我写的东西对你帮助,那我会觉得很开心。如果你觉得我写的东西还需要改进,我很想听到你的建议。让我们一起进步吧。
可以加入QQ群聊一起探讨:874424803,如果还没有关注,长按可以关注哦。感谢您的支持。
相互探讨
共同进步