1.准备工作
1.1.引用到项目中
在你的项目的build.gradle文件中配置:
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
在app的build.gradle文件中配置:
compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
1.2.jithub地址
https://github.com/PhilJay/MPAndroidChart
2.使用
2.1.布局文件
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/bar_chart"
android:layout_width="match_parent"
android:layout_height="240dp">
2.2.使用举例
在依赖的activity或者fragment中找到控件,设置相关属性,做相应的处理
MPAndroidChart中提供了很多的方法,可以帮助我们轻松的搞定我们的项目,个人认为最好的掌握该控件的方法是去jithub下载作者的sample,
通过在自己的手机上运行,切实找到方法,到源码中理解运用。
在这里我仅仅对一些常用的方法解析:
{
……
mBarChart = (BarChart) findViewById(R.id.bar_chart);
//设置背景颜色
mBarChart.setBackgroundColor(getResources().getColor(R.color.colorAccent));
//BarChart的点击事件
mBarChart.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
}
});
//设置数值选择的监听
mBarChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override public void onValueSelected(Entry e, Highlight h) {
}
@Override public void onNothingSelected() {
}
});
//设置高亮显示
mBarChart.setHighlightFullBarEnabled(true);
mBarChart.setDrawValueAboveBar(true);
//设置支持触控
mBarChart.setTouchEnabled(true);
//设置是否支持拖拽
mBarChart.setDragEnabled(true);
//设置能否缩放
mBarChart.setScaleEnabled(true);
//设置true支持两个指头向X、Y轴的缩放,如果为false,只能支持X或者Y轴的当方向缩放
mBarChart.setPinchZoom(true);
//获取图表右下角的描述性文字,setEnable()默认为true
mBarChart.getDescription().setEnabled(true);
Description description=new Description();
description.setText("description");
//设置右下角的描述文字
mBarChart.setDescription(description);
//设置阴影
mBarChart.setDrawBarShadow(false);
//设置所有的数值在图形的上面,而不是图形上
mBarChart.setDrawValueAboveBar(true);
//设置最大的能够在图表上显示数字的图数
mBarChart.setMaxVisibleValueCount(60);
//设置背景是否网格显示
mBarChart.setDrawGridBackground(false);
//X轴的数据格式
IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mChart);
//得到X轴,设置X轴的样式
XAxis xAxis = mChart.getXAxis();
//设置位置
xAxis.setPosition(XAxisPosition.BOTTOM);
//设置特定的标签类型
xAxis.setTypeface(mTfLight);
//设置是否绘制网格线
xAxis.setDrawGridLines(false);
//设置最小的区间,避免标签的迅速增多
xAxis.setGranularity(1f); // only intervals of 1 day
//设置进入时的标签数量
xAxis.setLabelCount(7);
//设置数据格式
xAxis.setValueFormatter(xAxisFormatter);
IAxisValueFormatter custom = new MyAxisValueFormatter();
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTypeface(mTfLight);
leftAxis.setLabelCount(8, false);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
//Sets the top axis space in percent of the full range. Default 10f
leftAxis.setSpaceTop(15f);
//设置Y轴最小的值
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setTypeface(mTfLight);
rightAxis.setLabelCount(8, false);
rightAxis.setValueFormatter(custom);
rightAxis.setSpaceTop(15f);
rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
//设置图例样式,默认可以显示,设置setEnabled(false);可以不绘制
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);
//设置X轴和Y轴显示的刻度
setData(12, 50);
}
private void setData(int count, float range) {
float start = 1f;
ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
for (int i = (int) start; i < start + count + 1; i++) {
float mult = (range + 1);
float val = (float) (Math.random() * mult);
yVals1.add(new BarEntry(i, val));
}
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.setColors(ColorTemplate.MATERIAL_COLORS);
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setValueTypeface(mTfLight);
data.setBarWidth(0.9f);
mChart.setData(data);
}
}
(1)找到控件,设置属性
(2)设置X轴样式(你也可以设置一些图表进入动画)
(3)设置Y轴样式
(你也可以设置一些图表进入动画)
(4)设置数据