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（不要问简单的问题）