MPAndroidChart BarChart柱状图的两个bug怎么修复

[csdn_02]

bug1： 我设置的柱状图数量是一屏幕显示10个，多余的就滑动显示。但是当柱状图数量小于10的时候，柱状图的宽度就变了，这个怎么固定每个柱状图的宽度。


bug2： 当我刷新数据时，如果周一的数据我往后滑动查看过的话，点击周二重新加载数据，图表的x轴不会从0开始，而且柱状图宽度变大了。。。 如果不滑动查看后面的数据的话就没问题。


详细代码如下：

package com.demo.mybarchart;

import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.formatter.YAxisValueFormatter;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.listener.OnChartValueSelectedListener;

import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements OnChartValueSelectedListener {
    private BarChart barChart;
    private List<Float> listData;
    private Button button;
    private Button button2;
    private int anInt = 31;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();

        showBarChart(listData);//显示柱状图
    }

    private void initView() {
        setTitle(getIntent().getStringExtra("title"));

        listData = new ArrayList<>();
        barChart = (BarChart) findViewById(R.id.barchart);
        barChart.setOnChartValueSelectedListener(this);

        button = (Button) findViewById(R.id.btn);
        button2 = (Button) findViewById(R.id.btn2);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                anInt = 5;
                initData();
                showBarChart(listData);//显示柱状图
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                anInt = 31;
                initData();
                showBarChart(listData);//显示柱状图
            }
        });

    }

    private void initData() {
        //模拟数据源，y轴数值用随机数显示
        listData.clear();
        for (int i = 0; i < anInt; i++) {
            listData.add((float) (Math.random() * 10));
        }
    }

    private void showBarChart(List<Float> listData) {//count表示横坐标个数
        initSrc(listData);
        initXAxis();
        BarData barData = getBarData(listData.size());
        barChart.setData(barData); // 设置数据
        Matrix m = new Matrix();
        m.postScale((float) listData.size()/10, 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍
        barChart.getViewPortHandler().refresh(m, barChart, true);//将图表动画显示之前进行缩放
        barChart.notifyDataSetChanged();
        barChart.invalidate();//刷新图表
    }

    private void initSrc(List<Float> listData) {
        // 如果没有数据的时候，会显示这个，类似ListView的EmptyView
        barChart.setNoDataTextDescription("暂无数据");
        barChart.setDrawBorders(false); //是否在折线图上添加边框

        barChart.setDescription("");// 数据描述
        barChart.setDescriptionPosition(0, 0);//数据描述的位置（设置0，0没有描述）
        barChart.setDescriptionColor(Color.RED);//数据的颜色
        barChart.setDescriptionTextSize(30);//数据字体大小

        barChart.setDrawGridBackground(false); // 是否显示表格颜色
        barChart.setGridBackgroundColor(this.getResources().getColor(R.color.yellow_90)); // 表格的的颜色
        barChart.setBackgroundColor(0xff1D2135);// 设置整个图标控件的背景
        barChart.setDrawBarShadow(true);//柱状图没有数据的部分是否显示阴影效果

        barChart.setScaleEnabled(false);// 是否可以缩放
        barChart.setPinchZoom(false);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放
        barChart.setTouchEnabled(true); // 设置是否可以触摸
        barChart.setDragEnabled(true);// 是否可以拖拽
        barChart.setDoubleTapToZoomEnabled(false);//设置双击不放大
        barChart.setDrawValueAboveBar(true);//柱状图上面的数值显示在柱子上面还是柱子里面
        barChart.zoom((float) listData.size()/10, 0, 0, 0);//设置缩放比例
        barChart.animateXY(500, 1000);

        Legend mLegend = barChart.getLegend(); // 设置比例图标示，就是那个一组y的value的
        mLegend.setEnabled(false);//true和false能控制比例图标识是否显示

        mLegend.setPosition(Legend.LegendPosition.BELOW_CHART_RIGHT);//设置比例图标的位置
        mLegend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);//设置比例图标和文字之间的位置方向
        mLegend.setTextColor(0xffFFA536);

        YAxisValueFormatter custom = new MyYAxisValueFormatter();//自定义Y轴文字样式
        barChart.getAxisLeft().setValueFormatter(custom);
        barChart.getAxisLeft().setTextColor(this.getResources().getColor(R.color.yellow_tran));
        barChart.getXAxis().setTextColor(this.getResources().getColor(R.color.yellow_tran));
    }

    private void initXAxis() {
        barChart.getXAxis().setDrawGridLines(false);//是否显示竖直标尺线
        barChart.getXAxis().setLabelsToSkip(0);//设置横坐标显示的间隔
        barChart.getXAxis().setDrawLabels(true);//是否显示X轴数值
        barChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//设置X轴的位置 默认在上方
        barChart.getXAxis().setDrawAxisLine(false);
        barChart.getXAxis().setLabelRotationAngle(-90);

        barChart.getAxisRight().setAxisLineWidth(0);
        barChart.getAxisRight().setDrawLabels(false);//右侧是否显示Y轴数值
        barChart.getAxisRight().setEnabled(false);//是否显示最右侧竖线
        barChart.getAxisRight().setDrawAxisLine(false);
        barChart.getAxisLeft().setDrawAxisLine(false);

        barChart.getAxisLeft().setDrawGridLines(false);
    }

    private BarData getBarData(int count) {
        //count  x轴个数
        ArrayList<String> xValues = new ArrayList<>();
        for (int i = 0; i < count; i++) {
            xValues.add( "Mon " + (i + 1));
        }
        ArrayList<BarEntry> yValues = new ArrayList<>();
        for (int i = 0; i < count; i++) {
            yValues.add(new BarEntry(listData.get(i), i));
        }
        // y轴的数据集合
        BarDataSet barDataSet = new BarDataSet(yValues, "");
        barDataSet.setLabel("我的大柱子");
        barDataSet.setBarSpacePercent(50);//设置柱子之间的宽度
        barDataSet.setVisible(true);//是否显示柱状图柱子
        barDataSet.setColor(this.getResources().getColor(R.color.yellow));//设置柱子颜色
        barDataSet.setHighLightColor(this.getResources().getColor(R.color.yellow));
        barDataSet.setDrawValues(false);//是否显示柱子上面的数值
        barDataSet.setBarShadowColor(this.getResources().getColor(R.color.yellow_90));

        ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
        barDataSets.add(barDataSet); // add the datasets

        BarData barData = new BarData(xValues, barDataSet);
        return barData;
    }

    @Override
    public void onValueSelected(Entry e, int i, Highlight highlight) {
        Toast.makeText(this, e.getXIndex()+"valu"+e.getVal()+e.getData(),Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onNothingSelected() {
        Toast.makeText(this, "onNothingSelected",Toast.LENGTH_SHORT).show();
    }

    //设置Y轴刻度样式
    public class MyYAxisValueFormatter implements YAxisValueFormatter {

        private DecimalFormat mFormat;

        public MyYAxisValueFormatter() {
            mFormat = new DecimalFormat("###,###,###,##0");
        }

        @Override
        public String getFormattedValue(float v, YAxis yAxis) {
            return mFormat.format(v) + "k";
        }
    }
}

[jklwan]

引用 2 楼 csdn_02 的回复:

大佬这个是可以，但是还有一个bug就是： 周一的数据滑动查看最后面，点击周二查看数据的时候，显示的是周二最后面的数据。也就是说柱状图数据更新了，但是图表的X轴还是保留之前查看的位置，这个怎么搞。

用moveViewToX(0) 移动到最左侧，且会调用invalidate

[csdn_02]

引用 4 楼 jklwan 的回复:

[quote=引用 2 楼 csdn_02 的回复:]
大佬这个是可以，但是还有一个bug就是：
周一的数据滑动查看最后面，点击周二查看数据的时候，显示的是周二最后面的数据。也就是说柱状图数据更新了，但是图表的X轴还是保留之前查看的位置，这个怎么搞。

用moveViewToX(0) 移动到最左侧，且会调用invalidate[/quote]
好像不行啊，我加在这几个位置都不行

[jklwan]

最大，最小都显示10个。

        barChart.setVisibleXRangeMaximum(10);
        barChart.setVisibleXRangeMinimum(10);

[csdn_02]

引用 1 楼 jklwan 的回复:

最大，最小都显示10个。

        barChart.setVisibleXRangeMaximum(10);
        barChart.setVisibleXRangeMinimum(10);

大佬这个是可以，但是还有一个bug就是：
周一的数据滑动查看最后面，点击周二查看数据的时候，显示的是周二最后面的数据。也就是说柱状图数据更新了，但是图表的X轴还是保留之前查看的位置，这个怎么搞。

[csdn_02]

引用 1 楼 jklwan 的回复:

最大，最小都显示10个。

        barChart.setVisibleXRangeMaximum(10);
        barChart.setVisibleXRangeMinimum(10);

周一是31条数据，我滑动到最后31的位置，当我点击周二重新加载15条数据，这时候图表显示的是6-15条，并不是0-10条数据，请问怎么去刷新这个图表显示的问题，用的barChart.invalidate();好像没什么用，还是说这个要放在哪个位置。。。。

[csdn_02]

引用 4 楼 jklwan 的回复:

[quote=引用 2 楼 csdn_02 的回复:]
大佬这个是可以，但是还有一个bug就是：
周一的数据滑动查看最后面，点击周二查看数据的时候，显示的是周二最后面的数据。也就是说柱状图数据更新了，但是图表的X轴还是保留之前查看的位置，这个怎么搞。

用moveViewToX(0) 移动到最左侧，且会调用invalidate[/quote]
可以默认选中一根柱状图吗？

[jklwan]

引用 5 楼 csdn_02 的回复:

好像不行啊，我加在这几个位置都不行

那就不太清楚了，用最新版本3.0.2试试。

[csdn_02]

引用 7 楼 jklwan 的回复:

[quote=引用 5 楼 csdn_02 的回复:]
好像不行啊，我加在这几个位置都不行

那就不太清楚了，用最新版本3.0.2试试。[/quote]
可以默认选中一根柱状图吗？

[jklwan]

引用 8 楼 csdn_02 的回复:

可以默认选中一根柱状图吗？

没有选中这个东西。