MPAndroidChart之柱状图开发总结
技术交流群：高级程序员 392602799（不要问简单的问题）
1.隐藏网格线,保留水平线
XAxis xAxis = mChart.getXAxis();
xAxis.setDrawAxisLine(true);
xAxis.setDrawGridLines(false);
mChart.getAxisLeft().setDrawAxisLine(false);2.设置显示每一个X轴的数值
系统默认的是跳过一个值,比如1,2,3,4,5会显示为:1,3,5
设置方法:
xAxis.setLabelsToSkip(0);
另外,如果X轴的数值过多的话,会有显示不齐的情况,这时可以设置一下字体:
xAxis.setTextSize(8f);
3.隐藏Y轴坐标
有时候,柱状图的需求是不显示这个坐标,这个时候可以设置:
incomeChart.getAxisLeft().setEnabled(false);
incomeChart.getAxisRight().setEnabled(false);4.设置坐标在原点/设置坐标最小值
xAxis.setXOffset(0);
mChart.getAxisLeft().setAxisMinValue(0f);5.设置双击,两指拉伸等交互的开关
mChart.setScaleEnabled(false);
mChart.setDoubleTapToZoomEnabled(false);6.设置线条描绘包裹
如果你设置了柱状图的颜色和柱状图之间间隙为0的话,那么柱状图之间将会连在一起,导致区分不明显,这个时候可以使用线条描绘一下:
mChart.setBorderWidth(2f); mChart.setBorderColor(getActivity().getResources().getColor(R.color.theme_color));事实上,这个作用好像并不大,取消显示也没什么影响.
7.设置比例图标的显示隐藏
比例图例就是legend,设置方法:
Legend legend = incomeChart.getLegend();
legend.setEnabled(false);设置显示位置在右边:
legend.setPosition(Legend.LegendPosition.BELOW_CHART_RIGHT);
8.设置柱状图的颜色:
barDataSet.setColors(new int[]{Color.rgb(255, 241, 226)})
还可以设置各个柱状图显示不一样的颜色:
barDataSet.setColors(new int[]{Color.rgb(255, 241, 226),Color.rgb(155, 241, 226),Color.rgb(255, 21, 226),Color.rgb(255, 241, 26)})
9.设置柱状图顶部不显示数值
barDataSet.setDrawValues(false);
10.设置柱状图之间的间距
barDataSet.setBarSpacePercent(2f);
11.设置右下角的描述文字:
incomeChart.setDescription("")
12.设置MarkView和Bar之间的高度
这个要在自定义的MarkView中继承MarkView进行修改:在这个方法中修改,定义一个高度:
private int desiredoffset = 50;
@Override
public int getYOffset(float ypos) {
return -getHeight()-desiredoffset;
}13.设置一进来的时候就显示MarkView
这个要利用Highlight进行设置:
Highlight highlight1 = new Highlight(0, 0);
Highlight highlight2 = new Highlight(xLables.size() - 1, 0);
incomeChart.highlightValues(new Highlight[]{highlight1, highlight2});这个目前是设置为显示第一条和组后一条Bar
14.监听点击动作并获取Bar值显示在其他View中
这个要在Activity或者Fragment中实现一个抽象方法:
public class XXX implements OnChartValueSelectedListener{
@Override
public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
float val = e.getVal();
tv_income.setText(val);
}
}
}
15.解决屏幕适配问题
如果柱状图是在一个较小的空间里面,那么如果不对高度进行限制,将会有一部分会被遮挡,这时候要手动设置最大值,否則系统会默认自己根据数据设置图的比例.
我的柱状图是在Viewpager中的,滑动显示不同的柱状图,也就是2个柱状图显示不同的数据,设置最大值的方法:
private void setMaxValue() {
YAxis leftAxis = incomeChart.getAxisLeft();
double maxRatio = 0.0;
double maxInterest = 0.0;
if (mTrends != null) {
for (int i = 0; i < mTrends.size(); i++) {
MonthAppreciateProduct.Trend trend = mTrends.get(i);
double ratioDay = trend.getRatioDay();
double interestDay = trend.getInterestDay();
if (ratioDay > maxRatio) maxRatio = ratioDay;
if (interestDay > maxInterest) maxInterest = interestDay;
}
}
if (mType.equals("ratio")) {
if (maxRatio > 0) {
leftAxis.setAxisMaxValue((float) (maxRatio * 1.3));
} else {
leftAxis.setAxisMaxValue(10f);
}
} else {
if (maxInterest > 0) {
leftAxis.setAxisMaxValue((float) (maxInterest * 1.3));//Y轴最大值
} else {
leftAxis.setAxisMaxValue(5f);
}
}
}这样就解决了自动比例导致小屏幕机型显示不全的问题,测试的时候在OPPO的3.5寸的机型上通过.
16.设置点击的highlight的颜色深浅
目前这个库是不支持修改点击后的颜色的,但是支持设置点击后的透明度:
barDataSet.setHighLightAlpha(37);数值是0~99;
tips:点击后的颜色也是可以修改的,但是要修改源码,具体查看19点.
17.设置x轴的颜色
xAxis.setAxisLineColor(getResources().getColor(R.color.week_bar_xaxis));
18.强制设置y轴的显示数量
mChart.getAxisLeft().setLabelCount(5,true);
19.修改点击柱状图后柱体的颜色
①找到这个文件打开:BarChartRenderer
②将这行代码:mHighlightPaint.setColor(Color.rgb(0, 0, 0)); 的color值修改为你
想要的颜色值:例如:mHighlightPaint.setColor(Color.rgb(254, 199, 109));
③找到这个方法drawHighlighted,修改paint的color值:
mHighlightPaint.setColor(set.getHighLightColor());,修改为:
mHighlightPaint.setColor(Color.rgb(254, 199, 109)); 等其他颜色值
然后注释掉这句话:
mHighlightPaint.setAlpha(set.getHighLightAlpha());
技术交流群：高级程序员 392602799（不要问简单的问题）