MPAndroidChart项目实战（四）——柱状图实现及X轴文字不显示问题和柱状图上显示文字

本文出自：http://blog.csdn.net/dt235201314/article/details/70237777

Demo下载（UpDating）：https://github.com/JinBoy23520/MPAndroidChartDemoByJin

MPAndroidChart常见设置属性（一）——应用层
MPAndroidChart项目实战（一）——实现对比性柱状图
MPAndroidChart项目实战（二）——双平滑曲线（双折线图）和MarkView实现
MPAndroidChart项目实战（三）——饼状图实现和文字重合问题解决
MPAndroidChart项目实战（四）——柱状图实现及X轴文字不显示问题和柱状图上显示文字
MPAndroidChart X轴文字斜着显示
MPAndroidChart项目实战（五）——组合图实现趋势图
MPAndroidChart项目实战（六）——自定义1MPAndroidChart滑动冲突解决（搞不定产品设计师就只能搞自己）
MPAndroidChart项目实战（七）——自定义横向柱状图
MPAndroidChart项目实战（八）——自定义分段堆积柱状图
MPAndroidChart项目实战（九）——自定义带文字分段堆积柱状图

一丶慨述

虽然在MPAndroidChart项目实战（一）里面就说了双柱状图的实现，但毕竟那是旧的jar包版，而目前的项目开发，用到的都是新版本，所以还是说一下总结一下，不整理不知道，一整理吓一跳，问题还真不少。

二丶效果：

三丶实现功能

1.实现柱状图。

2.解决柱状图上换行拼接文字问题。

3.解决X轴文字偶尔不显示问题。

四丶看代码

1.项目复用率很高，先得有个BarChartEntry.Java

/** * 柱状图 * Created by jin */public class BarChartEntity extends BaseChartEntity {    public BarChartEntity(BarLineChartBase chart, List[] entries, String[] labels, int[] chartColor, int valueColor, float textSize) {        super(chart, entries, labels, chartColor, valueColor, textSize);    }    @Override    protected void initChart() {        super.initChart();        mChart.getAxisLeft().setDrawGridLines(true);        mChart.getAxisLeft().enableGridDashedLine(10f, 15f, 0f);        mChart.getAxisLeft().setGridLineWidth(0.5f);        mChart.getAxisLeft().setGridColor(Color.parseColor("#f5f5f5"));        mChart.getAxisLeft().setDrawZeroLine(false);        mChart.getAxisRight().setDrawZeroLine(false);        mChart.getAxisRight().setZeroLineWidth(0f);        mChart.getAxisLeft().setZeroLineWidth(0f);        mChart.getAxisLeft().setDrawAxisLine(false);        mChart.getXAxis().setDrawAxisLine(false);        mChart.getXAxis().setAxisMinimum(0);    }    @Override    protected void setChartData() {        BarDataSet barDataSet;        if (mChart.getData() != null && mChart.getData().getDataSetCount() > 0) {            barDataSet = (BarDataSet) mChart.getData().getDataSetByIndex(0);            barDataSet.setValues(mEntries[0]);            mChart.getData().notifyDataChanged();            mChart.notifyDataSetChanged();        } else {            barDataSet = new BarDataSet(mEntries[0], labels == null ? "" : labels[0]);            barDataSet.setColors(mChartColors);            List colors = new ArrayList<>();            for (int color : mChartColors) {                colors.add(color);            }            barDataSet.setValueTextColors(colors);            ArrayList dataSets = new ArrayList<>();            dataSets.add(barDataSet);            BarData data = new BarData(dataSets);            data.setValueTextSize(mTextSize);            data.setBarWidth(0.9f);            mChart.setData(data);        }    }    public void setDrawValueAboveBar(boolean aboveBar) {        ((BarChart)mChart).setDrawValueAboveBar(aboveBar);    }    /**     * 设置bar宽度     * @param barWidth float     */    public void setBarWidth(float barWidth) {        ((BarChart)mChart).getData().setBarWidth(barWidth);    }}

这样就可以直接添加方法用了

/** * 柱状图 该在X轴得文字显示在柱状图上 */private void updataBarChart() {    mBarChart = (BarChart) mView.findViewById(R.id.new_the_bar_chart);    List[] entries = new ArrayList[3];    final String[] labels = {            getActivity().getResources().getString(R.string.actual_value),            getActivity().getResources().getString(R.string.budget_value),            getActivity().getResources().getString(R.string.yoy_value),};    int[] cahrtColors = {            Color.parseColor("#45A2FF"),            Color.parseColor("#58D4C5"),            Color.parseColor("#FDB25F")};    final double[] values = new double[3];    ArrayList entries1 = new ArrayList<>();    float actualValue = 10086;    float budgetValue = 1001;    float yoyValue = 12580;    entries1.add(new BarEntry(0.5f, actualValue));    entries1.add(new BarEntry(1.3f, budgetValue));    entries1.add(new BarEntry(2.1f, yoyValue));    values[0] = actualValue;    values[1] = budgetValue;    values[2] = yoyValue;    entries[0] = entries1;    if (mBarChart.getData() != null) {        mBarChart.getData().clearValues();    }    BarChartEntity barChartEntity = new BarChartEntity(mBarChart, entries, labels, cahrtColors, Color.parseColor("#999999"), 13f);    barChartEntity.setBarWidth(0.55f);    barChartEntity.setDrawValueAboveBar(true);    mBarChart.setPinchZoom(false);    mBarChart.setScaleEnabled(false);    mBarChart.animateY(2000, Easing.EasingOption.EaseInOutQuart);    barChartEntity.setAxisFormatter(new IAxisValueFormatter() {        @Override        public String getFormattedValue(float value, AxisBase axis) {            return "";        }    }, null);    mBarChart.getLegend().setEnabled(false);    /**     * 拼接柱状图上文字，涉及到修改源码     */    mBarChart.getData().setValueFormatter(new IValueFormatter() {        @Override        public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {            return labels[entry.getX() == 0.5f ? 0 : (entry.getX() == 1.3f ? 1 : 2)]                    + "\n"                    + mFormat.format(values[entry.getX() == 0.5f ? 0 : (entry.getX() == 1.3f ? 1 : 2)]);        }    });    /**     * 处理当数据都为0，不好看情况     */    float yMax = mBarChart.getData().getYMax() == 0 ? 100f : mBarChart.getData().getYMax();    float delta = yMax / 5.5f;    mBarChart.getAxisLeft().setAxisMaximum(yMax + delta);    float yMin = mBarChart.getData().getYMin();    if (yMin == 0) {        yMin = 0;    }    float deltaMin = yMin / 5.0f;    mBarChart.getAxisLeft().setAxisMinimum(yMin - deltaMin);}

代码敲完，发现没报错，但问题了来，柱状图上的文字是在同一排显，方法getFormattedValue里的“\n”,换行符并没起到作用。

此刻埋怨（该死的设计师，把那行字写在X轴出不久OK，非要整在柱状图上），初级工程师满心抓狂，大神微微一下，可能是绘图的部分出问题，找到位置

方法 public void drawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color){}用到的是paint，是不支持换行符的，那么怎么办呢，换支持的textpaint。

/**     * Draws the value of the given entry by using the provided IValueFormatter.     *     * @param c            canvas     * @param formatter    formatter for custom value-formatting     * @param value        the value to be drawn     * @param entry        the entry the value belongs to     * @param dataSetIndex the index of the DataSet the drawn Entry belongs to     * @param x            position     * @param y            position     * @param color     */    public void drawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color) {        mValuePaint.setColor(color);                //回车换行符处理        TextPaint textPaint = new TextPaint();        textPaint.setColor(mValuePaint.getColor());        textPaint.setTextSize(mValuePaint.getTextSize());        textPaint.setAntiAlias(true);        String valueTemp = formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler);        StaticLayout myStaticLayout = new StaticLayout(valueTemp, 0, valueTemp.length(), textPaint,                (int)textPaint.measureText(valueTemp), Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);        c.save();        c.translate(x - myStaticLayout.getWidth() / 2, y - myStaticLayout.getHeight()); //开始画位置        myStaticLayout.draw(c);        c.restore();//        c.drawText(formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x, y, mValuePaint);    }

问题解决了。菜鸟此刻仰望大神，我要怎么才能像大神一样，大神微微一笑：“恶补Android 绘图部分，多读源码，Believe you can fly”

菜鸟恍然大悟，原来设计师并不是刁难自己，原来是磨练啊。

说完X轴文字放到柱状图上的，再说说，X轴显示时间段的。

看方法：

/** * X轴显示时间段的柱状图 */public void updataXBarChart(){    final MonthItemEntity entity = new MonthItemEntity();    xBarChart = (BarChart) mView.findViewById(R.id.new_x_bar_chart);    List[]entries = new ArrayList[1];    //x轴坐标 控制显示位置，并不会在X轴上显示具体的值    final float[] xlabels = new float[entity.getMonthDatas().size()];    int[] color ={Color.parseColor("#7f45a2ff")};    final String unit = "%";    //x轴坐标增量    float delta = 1;    for (int index = 0, len = entity.getMonthDatas().size(); index < len; index ++) {        xlabels[index] = index * delta + delta;    }    entries[0] = entity.getMonthEntries();    BarChartEntity barChartEntity = new BarChartEntity(xBarChart, entries, null, color, Color.parseColor("#999999"), 10f);    /*属性修改设置*/    barChartEntity.setBarWidth(0.55f);    barChartEntity.setDrawValueAboveBar(true);    xBarChart.setPinchZoom(false);    xBarChart.setScaleEnabled(false);    xBarChart.getLegend().setEnabled(false);    xBarChart.getXAxis().setTextSize(9f);    xBarChart.getAxisLeft().setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);    mBarChart.animateY(1000, Easing.EasingOption.EaseInOutQuart);    /*X,Y坐标显示设置*/    barChartEntity.setAxisFormatter(new IAxisValueFormatter() {        @Override        public String getFormattedValue(float value, AxisBase axis) {            for (int index = 0,len = xlabels.length; index < len; index ++) {                if (value == xlabels[index]) {                    return entity.getMonthDatas().get(index).getBeginTime() + "-" + entity.getMonthDatas().get(index).getEndTime();                }            }            return "";        }    }, new IAxisValueFormatter() {        @Override        public String getFormattedValue(float value, AxisBase axis) {            return mFormat.format(value) + (unit.equals("%") ? unit : "");        }    });    /*值显示设置*/    xBarChart.getData().setValueFormatter(new IValueFormatter() {        @Override        public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {            return mFormat.format(value) + (unit.equals("%") ? unit : "");        }    });        /*Y轴最大值最小值设置，为了尽可能的显示完整数据*/    float yMax = xBarChart.getData().getYMax() == 0 ? 100f :xBarChart.getData().getYMax();    float yDelta = yMax / 5.5f;    float axisMaximum = yMax + yDelta;    if (axisMaximum < 5) {        axisMaximum = 5;    }    xBarChart.getAxisLeft().setAxisMaximum(axisMaximum);    float yMin = xBarChart.getData().getYMin();    float deltaMin = yMin / 5.0f;    xBarChart.getAxisLeft().setAxisMinimum(yMin - deltaMin);}

理论上这样就OK了，设置了根据方法设置了XY的显示，然而X轴得文字去有一写无法显示，如效果图一。

这下有gg了，没时间还怎么用，找大神，这下大神也笑不出来了：“待我细细研究再做讨论”......

第二天，大神微微一笑，先看在显示X轴字符样式的方法里面的判断if (value == xlabels[index])，为什么我要这么去判断呢。我们知道X轴的值在显示上是平均分的，而我只有三个柱子的时候，我只要他显示三个值，所以用了xlabels[index]作为对比，只在整数位置显示拼接文字。那么问题又来了。X轴得Value是的浮点型，这样计算出柱子的平均位置就可能是浮点型，不等了自然就不显示。好了，改。

找到位置：

方法computeAxisValues（），把计算值改为int型

主要修改位置（截了修改位置的代码）：

protected void computeAxisValues(float min, float max) {    float yMin = min;    float yMax = max;    int labelCount = mAxis.getLabelCount();    double range = Math.abs(yMax - yMin);    if (labelCount == 0 || range <= 0 || Double.isInfinite(range)) {        mAxis.mEntries = new float[]{};        mAxis.mCenteredEntries = new float[]{};        mAxis.mEntryCount = 0;        return;    }    // Find out how much spacing (in y value space) between axis values    int rawInterval = (int)range / labelCount;    int interval = (int)Utils.roundToNextSignificant(rawInterval);    if (interval == 0) {        interval +=1;    }    // If granularity is enabled, then do not allow the interval to go below specified granularity.    // This is used to avoid repeated values when rounding values for display.    if (mAxis.isGranularityEnabled())        interval = interval < mAxis.getGranularity() ? (int)mAxis.getGranularity() : interval;    // Normalize interval    double intervalMagnitude = Utils.roundToNextSignificant(Math.pow(10, (int) Math.log10(interval)));    int intervalSigDigit = (int) (interval / intervalMagnitude);    if (intervalSigDigit > 5) {        // Use one order of magnitude higher, to avoid intervals like 0.9 or        // 90        interval = (int)Math.floor(10 * intervalMagnitude);    }    int n = mAxis.isCenterAxisLabelsEnabled() ? 1 : 0;    // force label count    if (mAxis.isForceLabelsEnabled()) {        interval = (int) range / (int) (labelCount - 1);        mAxis.mEntryCount = labelCount;        if (mAxis.mEntries.length < labelCount) {            // Ensure stops contains at least numStops elements.            mAxis.mEntries = new float[labelCount];        }

OK，运行代码，达到图二想要效果

五丶跪求关注下载源码，200粉小目标
欢迎关注我的博客及微信公众号，后面会给大家带来更多相关MPAndroidChart无法解决的仿MPAndroidChart图标自定义控件
源码下载记得顺便Star哦~
下载链接：https://github.com/JinBoy23520/MPAndroidChartDemoByJin

更多相关文章

随机推荐