MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。

MPAndroidChart攻略——BarChart并列柱状图的点点滴滴。

MPAndroidChart_折线图的那些事

MPAndroidChart_饼图的那些事

MPAndroidChart_动态柱状图

MPAndroidChart_水平条形图的那些事

MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。

MPAndroidChart_雷达图的那些事及自定义标签颜色

 

昨天在比赛中遇到了MP的并列柱状图,看网上对这方面记录并不是很多,所以今天就做一个教程吧。

先看简单的需求草图吧

好了,现在开始上代码,需要特别注意的地方,会重点标出来提醒。

public class Main2Activity extends AppCompatActivity {
    private BarChart chart;
    private CountDownTimer count;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        chart=findViewById(R.id.chart);
        info();
        count=new CountDownTimer(Integer.MAX_VALUE,2000) {
            @Override
            public void onTick(long millisUntilFinished) {
                setData();
            }

            @Override
            public void onFinish() {

            }
        }.start();
    }
  
    private void info(){
        XAxis xAxis=chart.getXAxis();
        xAxis.setDrawGridLines(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setLabelCount(5);
        //设置x轴最小值
        xAxis.setAxisMinimum(0f);
        //设置x轴最大值
        xAxis.setAxisMaximum(5f);
        final String[] data={"周一","周二","周三","周四","周五"};
        //标签居中
        xAxis.setTextSize(25f);
        xAxis.setCenterAxisLabels(true);
        //自定义x轴
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return data[(int) Math.abs(v%5)];
            }
        });

        YAxis left=chart.getAxisLeft();
        left.setAxisMinimum(0f);
        left.setAxisMaximum(6f);
        left.setLabelCount(6);
        //设置字体大小
        left.setTextSize(25f);
        //设置y轴左侧竖线宽度 不设置在自定义标签时会出现不显示竖线的情况
        left.setAxisLineWidth(1f);
        //隐藏Y轴左侧网格线
        left.setDrawGridLines(false);
        final String[] setY={"","畅通","缓行","拥堵","一般拥堵","严重拥堵"};
        left.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return v>=6?"":setY[(int) v];
            }
        });

        YAxis right=chart.getAxisRight();
        right.setDrawGridLines(false);
        right.setAxisMinimum(0f);
        right.setTextSize(25f);
        right.setAxisMaximum(5f);

        //设置图表编译,避免x轴标签显示不全
        chart.setExtraBottomOffset(10);
        //禁用图例
        chart.getLegend().setEnabled(false);
        //禁用描述
        chart.getDescription().setEnabled(false);
    }

    private void setData(){
        List<BarEntry> list1=new ArrayList<>();
        List<BarEntry> list2=new ArrayList<>();
        List<BarEntry> list3=new ArrayList<>();
        for (int i=0;i<5;i++){
            list1.add(new BarEntry(i, (float) (Math.random()*5)));
            list2.add(new BarEntry(i, (float) (Math.random()*5)));
            list3.add(new BarEntry(i, (float) (Math.random()*5)));
        }
        BarDataSet set1=new BarDataSet(list1,"");
        BarDataSet set2=new BarDataSet(list2,"");
        BarDataSet set3=new BarDataSet(list3,"");
        set1.setColor(Color.RED);
        set2.setColor(Color.BLUE);
        set3.setColor(Color.GREEN);

        BarData data=new BarData(set1,set2,set3);
        //组内柱状图之间的空间
        float barspace=0.05f;
        //每组之间的空间
        float groupspcae=0.3f;
        //柱状图的宽度
        float barWidth=(1-0.3f-0.05f*3)/3;
        //设置柱状图的宽度
        data.setBarWidth(barWidth);
        //(起始点,组间隔,组内间隔)
        data.groupBars(0f,groupspcae,barspace);

        //上面的计算公式为  图组间隔+(柱状图间隔*柱状图个数)+子柱状图宽度*每组柱状图个数=1f
        //简单计算为  子柱状图宽度=(1f-图组间隔-(柱状图间隔*柱状图个数))/每组柱状图个数

        //设置
        chart.setData(data);
        //刷新布局
        chart.invalidate();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (count != null) {
            count.cancel();
            count=null;
        }
    }
}

看看实际效果图

 

现在,我们来实现如何点击隐藏相应的条目。

思路是这样的,这里感谢我的工作室同学,简单又粗暴:

点击相应的按钮,设置相应的柱状图颜色为白色。算一种比较投巧的办法吧。

我当时的想法是,对数据进行保留,然后加上标记位,每次点击,将相应位置的数据改为0,然后刷新布局即可。但是总是List数据改了 ,图表刷新却直接将一组数据全删了,很是纳闷,试了一个上午,都没有找到原因。

如果你们谁有更好的想法,也欢迎说一下

以下细节需要注意:

背景色一定要改为白色,默认的那个背景色并不是纯白,网格线需要禁用,否则效果很是尴尬。

需要隐藏掉标签显示,否则柱状图颜色没了,标签还在,当然也可以通过自定义 标签的显示,将相对应的标签自定义为“”,也可以实现禁用。

4.17号补充,直接更改数据然后刷新布局也可以实现,当时的改错了一个值。 

 下面开始上代码

public class Main2Activity extends AppCompatActivity implements View.OnClickListener {
    private BarChart chart;
    private CountDownTimer count;
    private BarDataSet set1;
    private BarDataSet set2;
    private BarDataSet set3;
    //标记位
    private boolean mode1 = false, mode2 = false, mode3 = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        chart = findViewById(R.id.chart);
        info();
        //定时器
        count = new CountDownTimer(Integer.MAX_VALUE, 2000) {
            @Override
            public void onTick(long millisUntilFinished) {
                setData();
            }

            @Override
            public void onFinish() {

            }
        }.start();
    }


    private void info() {
        XAxis xAxis = chart.getXAxis();
        xAxis.setDrawGridLines(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setLabelCount(5);
        //设置x轴最小值
        xAxis.setAxisMinimum(0f);
        //设置x轴最大值
        xAxis.setAxisMaximum(5f);
        final String[] data = {"周一", "周二", "周三", "周四", "周五"};
        //标签居中
        xAxis.setTextSize(25f);
        xAxis.setCenterAxisLabels(true);
        //自定义x轴
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return data[(int) Math.abs(v % 5)];
            }
        });

        YAxis left = chart.getAxisLeft();
        left.setAxisMinimum(0f);
        left.setAxisMaximum(6f);
        left.setLabelCount(6);
        //设置字体大小
        left.setTextSize(25f);
        //设置y轴左侧竖线宽度 不设置在自定义标签时会出现不显示竖线的情况
        left.setAxisLineWidth(1f);
        //隐藏Y轴左侧网格线
        left.setDrawGridLines(false);
        final String[] setY = {"", "畅通", "缓行", "拥堵", "一般拥堵", "严重拥堵"};
        left.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return v >= 6 ? "" : setY[(int) v];
            }
        });

        YAxis right = chart.getAxisRight();
        right.setDrawGridLines(false);
        right.setAxisMinimum(0f);
        right.setTextSize(25f);
        right.setAxisMaximum(5f);

        //设置图表编译,避免x轴标签显示不全
        chart.setExtraBottomOffset(10);
        //禁用图例
        chart.getLegend().setEnabled(false);
        //禁用描述
        chart.getDescription().setEnabled(false);
        chart.setBackgroundColor(Color.WHITE);

        findViewById(R.id.hide_red).setOnClickListener(this);
        findViewById(R.id.hide_blue).setOnClickListener(this);
        findViewById(R.id.hide_gre).setOnClickListener(this);
    }

     private void setData() {
        List<BarEntry> list1 = new ArrayList<>();
        List<BarEntry> list2 = new ArrayList<>();
        List<BarEntry> list3 = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            list1.add(new BarEntry(i, (float) (Math.random() * 5)));
            list2.add(new BarEntry(i, (float) (Math.random() * 5)));
            list3.add(new BarEntry(i, (float) (Math.random() * 5)));
        }
        set1 = new BarDataSet(list1, "");
        set2 = new BarDataSet(list2, "");
        set3 = new BarDataSet(list3, "");
        setHide(mode1, set1, Color.RED);
        setHide(mode2, set2, Color.BLUE);
        setHide(mode3, set3, Color.GREEN);
        BarData data = new BarData(set1, set2, set3);
        //组内柱状图之间的空间
        float barspace = 0.05f;
        //每组之间的空间
        float groupspcae = 0.3f;
        //柱状图的宽度
        float barWidth = (1 - 0.3f - 0.05f * 3) / 3;
        //设置柱状图的宽度
        data.setBarWidth(barWidth);
        //(起始点,组间隔,组内间隔)
        data.groupBars(0f, groupspcae, barspace);

        //上面的计算公式为  图组间隔+(柱状图间隔*柱状图个数)+子柱状图宽度*每组柱状图个数=1f
        //简单计算为  子柱状图宽度=(1f-图组间隔-(柱状图间隔*柱状图个数))/每组柱状图个数

        //设置
        chart.setData(data);
        //刷新布局
        chart.invalidate();
    }


    //设置柱状图颜色为白色
    private void setHide(boolean mode, BarDataSet set, int color) {
        if (mode) {
            set.setColor(Color.WHITE);
        } else {
            set.setColor(color);
        }
        set.setDrawValues(false);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.hide_red:
                mode1 = true;
                set1.setColor(Color.WHITE);
                chart.invalidate();
                break;
            case R.id.hide_blue:
                mode2 = true;
                set2.setColor(Color.WHITE);
                chart.invalidate();
                break;
            case R.id.hide_gre:
                mode3 = true;
                set3.setColor(Color.WHITE);
                chart.invalidate();
                break;
        }
    }

  @Override
    protected void onDestroy() {
        super.onDestroy();
        if (count != null) {
            count.cancel();
            count = null;
        }
    }

}

效果就是这样。如果有更好的解决方案,也欢迎大家告诉我。 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

petterp

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值