MPAndroidChart的BarChart用法
这里我导入的是MPAndroidChart的Library项目
导入步骤大概说一下吧
- 首先新建一个项目。
- 导入Library项目。File->New->Import Module->选择要导入的Library项目->OK
- 在项目中引用Library。File->Project Structure->app->Dependencies->点击加号->Module dependency->选中要使用的Library->Ok->OK。
- 然后Messages窗口看到BuILD SUCCESSFUL。代表以及导入成功
本文导入MPAndroidChart的Library。不是重点,重点的是使用
本文主要涉及设置:自定义x轴显示的数字格式,自定义MarkerView,动态设置y轴最大值
我刚刚接触到MPAndroidChart的一些疑惑:y轴的最少值不是零,柱状条和网格不对齐,如何自定义MarkView,X轴显示的样式是数字,不是我想要的。
后面慢慢了解的多了,真的觉得这个库很强大,我们能看到的地方都是有属性设置的,可以满足大多数的开发要求。
下面制作的gif动图有点模糊,抱歉哈,将就看看(有空我看看有什么软件把视频转换为gif比较清晰),后面会给出源码地址。
图片是这个样子的
BarChart只设置数据不设置属性的样子(如图)。
图片:
private BarChart barChart;
private List<Integer> numbers = new ArrayList<>();
private int number;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
barChart = (BarChart) findViewById(R.id.id_BarChart);
setData();
setChart();
}
/*
* 设置BarChart的数据
* */
private void setChart() {
barChart.setDescription(null); //设置描述文字为null
barChart.setBackgroundColor(Color.parseColor("#cccccc")); //设置背景颜色
barChart.setDrawBarShadow(false); //绘制当前展示的内容顶部阴影
barChart.setPinchZoom(false); //设置x轴和y轴能否同时缩放。默认否
barChart.setMaxVisibleValueCount(10); //设置图表能显示的最大值,仅当setDrawValues()属性值为true时有用
barChart.setFitBars(true); //设置X轴范围两侧柱形条是否显示一半
XAxis xAxis = barChart.getXAxis(); //x轴
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //设置label在底下
xAxis.setDrawGridLines(false); //不设置竖型网格线
xAxis.setTextColor(Color.parseColor("#ffffff"));
xAxis.setTextSize(8);
xAxis.setDrawLabels(true); //是否显示X坐标轴上的刻度,默认是true
xAxis.setLabelCount(10,false); //第一个参数是轴坐标的个数,第二个参数是 是否不均匀分布,true是不均匀分布
//至此,x坐标轴显示的是1,2,3,4,5,6,7,8,9,10
//自定义x轴显示的数字格式
xAxis.setValueFormatter(new XFormattedValue(MainActivity.this));
//自定义markView
MyMarkView markerView = new MyMarkView(MainActivity.this,R.layout.my_marker_view);
markerView.setChartView(barChart);
barChart.setMarker(markerView);
YAxis leftAxis = barChart.getAxisLeft(); //获取到y轴,分左右
leftAxis.setLabelCount(3, true); //第一个参数是轴坐标的个数,第二个参数是 是否不均匀分布,true是不均匀分布
leftAxis.setDrawGridLines(true); //不要横网格
leftAxis.setGridColor(Color.parseColor("#000000")); //设置横网格颜色
leftAxis.setSpaceTop(20f); //设置在图表上最高处的值相比轴上最高值的顶端空间(总轴范围的百分比)
leftAxis.setAxisMinimum(0f); //为这个轴设置一个自定义的最小值。如果设置,这个值不会自动根据所提供的数据计算
leftAxis.setTextColor(Color.WHITE);
leftAxis.setDrawAxisLine(false); //设置为true,绘制轴线
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); //y轴的数值显示在外侧
//这里也可以自定义y轴显示样式。和x轴的自定义方法一样
barChart.getAxisRight().setEnabled(false); // 隐藏右边 的坐标轴
Legend legend = barChart.getLegend();
legend.setEnabled(false);//不设置图例
//setAxisMaximum(float max)为这个轴设置一个自定义的最大值。如果设置,这个值不会自动根据所提供的数据计算
//resetAxisMaximum():撤销先前设置的最大值。通过这样做,你将再次允许轴自动计算它的最大值
Collections.sort(numbers); //重新排序集合,按小到大排序
leftAxis.setAxisMaximum( numbers.get(numbers.size()-1) ); //动态自定义y轴的最大值
LimitLine limitLine = new LimitLine(10.0f,"限制线:10.0");
limitLine.setLabelPosition(LimitLine.LimitLabelPosition.LEFT_TOP);
limitLine.setTextSize(8);
limitLine.setTextColor(Color.parseColor("#000000"));
leftAxis.addLimitLine(limitLine);
barChart.setTouchEnabled(false);
}
/*
* 准备数据,Barchart设置数据
* 设置数据需要四个步骤
* */
private void setData(){
//1,BarEntry集合,
ArrayList<BarEntry> barEntriesData = new ArrayList<>();
Random random = new Random();
for(int i=1;i<=10;i++){
barEntriesData.add(new BarEntry(i,number = random.nextInt(101)));
numbers.add(number);
}
//2,BarDataSet
BarDataSet bardataSet = new BarDataSet(barEntriesData,"");
bardataSet.setDrawValues(false);
//3,把BarDataSet数据添加到IBarDataSet集合
ArrayList<IBarDataSet> iBarDataSets = new ArrayList<>();
iBarDataSets.add(bardataSet);
//4,BarData
BarData barData = new BarData(iBarDataSets);
//5,设置数据
barChart.setData(barData);
}
}
自定义MarkerView
/*
* 1,继承自 MarkerView
* 2,refreshContent(Entry e, Highlight highlight) : 每次 MarkerView 重绘此方法都会被调用,并为您提供更新它显示的内容的机会(例如,为一个 TextView 设置文本 ,…)。 它提供了当前突出显示的 Entry 和相应的Highlight对象以获得更多信息。
* 3,getOffset(): 在这里,应返回要绘制的 MarkerView 在x轴的偏移位置。
* */
public class MyMarkView extends MarkerView {
private LinearLayout linearLayout;
private TextView tv_content;
/**
* Constructor. Sets up the MarkerView with a custom layout resource.
*
* @param context
* @param layoutResource the layout resource to use for the MarkerView
*/
public MyMarkView(Context context, int layoutResource) {
super(context, layoutResource);
linearLayout = (LinearLayout) findViewById(R.id.linearLayout);
tv_content = (TextView) findViewById(R.id.tv_content);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
tv_content.setText(e.getX()+"--"+e.getY());
super.refreshContent(e, highlight);
}
@Override
public MPPointF getOffset() {
return new MPPointF(-(getWidth() / 2), -getHeight()-30);
}
}
自定义轴线 显示的格式
/*
* 1实现IAxisValueFormatter
* 2重写getFormattedValue,根据不同的下标返回不同的值
* */
public class XFormattedValue implements IAxisValueFormatter {
private Context context;
public XFormattedValue(Context context){
this.context=context;
}
/*
* 重写该方法根据值返回自定义的数值
* */
@Override
public String getFormattedValue(float value, AxisBase axis) {
if (value==1){
return "一";
}else if (value==2){
return "二";
}else if (value==3){
return "三";
}else if (value==4){
return "四";
}else if (value==5){
return "五";
}else if (value==6){
return "六";
}else if (value==7){
return "七";
} else if (value==8){
return "八";
}else if (value==9){
return "九";
}else if (value==10){
return "十";
}
return "";
}
@Override
public int getDecimalDigits() {
return 0;
}
}
源码地址:http://download.****.net/download/qq_35270692/10045582