用MPAndroidChart实现可滑动的柱状图

用MPAndroidChart实现可滑动的柱状图

大家好,又见面了,我是全栈君。

转载时请记得标明源地址:https://my.oschina.net/lijindou/blog/799927

本人博客地址:  http://my.oschina.net/lijindou/blog

源码地址:http://download.csdn.net/detail/qq_33144317/9699763

其实原理很简单,就是将视图横向放大,然后 就成了滑动的 柱状图了

我就直接上图上代码了 

图:

102757_Fl1V_2728799.png

代码:

MainActivity.java

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;

import java.util.ArrayList;

/**
 * @author Gold Bean Lee
 * @time 20161202
 */
public class MainActivity extends Activity {

    private BarChart mBarChart;
    private BarChart mBarChart1;
    private BarChart mBarChart2;
    private BarCharts mBarCharts;

    private String[] color = {"#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBarCharts = new BarCharts();

        // 创建多张图表
        mBarChart = (BarChart) findViewById(R.id.spreadBarChart);
        mBarChart1 = (BarChart) findViewById(R.id.spreadBarChart1);
        mBarChart2 = (BarChart) findViewById(R.id.spreadBarChart2);

        mBarCharts.showBarChart(mBarChart, getBarData(10, 99), true);
        mBarCharts.showBarChart(mBarChart1, getBarData(20, 199), true);
        mBarCharts.showBarChart(mBarChart2, getBarData(20, 199), false);

    }

    /**
     * 这个方法是初始化数据的
     *
     * @param count X 轴的个数
     * @param range Y 轴的数据
     */
    public BarData getBarData(int count, float range) {
        ArrayList<String> xValues = new ArrayList<>();
        for (int i = 0; i < count; i++) {
            xValues.add("" + (i + 1) + "");// 设置每个柱壮图的文字描述
        }

        ArrayList<BarEntry> yValues = new ArrayList<>();
        for (int i = 0; i < count; i++) {
            float value = (float) (Math.random() * range/*100以内的随机数*/) + 3;
            yValues.add(new BarEntry(value, i));
        }
        // y轴的数据集合
        BarDataSet barDataSet = new BarDataSet(yValues, "测试图");
        ArrayList<Integer> colors = new ArrayList<>();
        for (int i = 0; i < count; i++) {
//            colors.add(Color.parseColor("#75bfe2"));
            colors.add(Color.parseColor(color[i]));
        }
        barDataSet.setColors(colors);
        // 设置栏阴影颜色
        barDataSet.setBarShadowColor(Color.parseColor("#01000000"));
        ArrayList<BarDataSet> barDataSets = new ArrayList<>();
        barDataSets.add(barDataSet);
        barDataSet.setValueTextColor(Color.parseColor("#FF8F9D"));
        // 绘制值
        barDataSet.setDrawValues(true);
        BarData barData = new BarData(xValues, barDataSets);
        return barData;
    }

}

BarCharts.java

import android.graphics.Color;
import android.graphics.Matrix;
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.data.BarData;

/**
 * @author Gold Bean Lee
 * @time 20161202
 */
public class BarCharts {

    /**
     * @param barChart  控件
     * @param barData   数据
     * @param isSlither 用来控制是否可以滑动
     */
    public void showBarChart(BarChart barChart, BarData barData, boolean isSlither) {
        //绘制高亮箭头
        barChart.setDrawHighlightArrow(false);
        //设置值显示在柱状图的上边或者下边
        barChart.setDrawValueAboveBar(true);
        //设置绘制网格背景
        barChart.setDrawGridBackground(true);
        //设置双击缩放功能
        barChart.setDoubleTapToZoomEnabled(false);
        //设置规模Y启用
        barChart.setScaleYEnabled(false);
        //设置规模X启用
        barChart.setScaleXEnabled(false);
        //启用设置阻力
        barChart.setScaleEnabled(true);
        //设置每个拖动启用的高亮显示
        barChart.setHighlightPerDragEnabled(false);
        // 设置硬件加速功能
        barChart.setHardwareAccelerationEnabled(true);
        // 设置绘制标记视图
        barChart.setDrawMarkerViews(true);
        // 设置启用日志
        barChart.setLogEnabled(true);
        // 设置突出功能
        barChart.setHighlightEnabled(true);
        // 设置拖动减速功能
        barChart.setDragDecelerationEnabled(true);
        // 数据描述
        barChart.setDescription("");
        // 如果没有数据的时候,会显示这个,类似ListView的EmptyView
        barChart.setNoDataTextDescription("没有数据了");
        barChart.setNoDataText("O__O …");
        // 是否显示表格颜色  
        barChart.setDrawGridBackground(false);


        /**
         * 下面这几个属性你们可以试试 挺有意思的
         * */
        // 设置是否可以触摸
        barChart.setTouchEnabled(isSlither);
        // 是否可以拖拽
        barChart.setDragEnabled(isSlither);//放大可拖拽
        // 是否可以缩放
        barChart.setScaleEnabled(false);
        // 集双指缩放
        barChart.setPinchZoom(false);


        // 设置背景
        barChart.setBackgroundColor(Color.parseColor("#01000000"));
        // 如果打开,背景矩形将出现在已经画好的绘图区域的后边。
        barChart.setDrawGridBackground(false);
        // 集拉杆阴影
        barChart.setDrawBarShadow(false);
        // 图例
        barChart.getLegend().setEnabled(false);
        // 设置数据
        barChart.setData(barData);
        // 隐藏右边的坐标轴 (就是右边的0 - 100 - 200 - 300 ... 和图表中横线)
        barChart.getAxisRight().setEnabled(false);
        // 隐藏左边的左边轴 (同上)
        // 网格背景颜色
        barChart.setGridBackgroundColor(Color.parseColor("#00000000"));
        // 是否显示表格颜色
        barChart.setDrawGridBackground(false);
        // 设置边框颜色
        barChart.setBorderColor(Color.parseColor("#00000000"));
        // 说明颜色
        barChart.setDescriptionColor(Color.parseColor("#00000000"));
        // 拉杆阴影
        barChart.setDrawBarShadow(false);
        // 打开或关闭绘制的图表边框。(环绕图表的线)
        barChart.setDrawBorders(false);
        Legend mLegend = barChart.getLegend(); // 设置比例图标示
        // 设置窗体样式
        mLegend.setForm(Legend.LegendForm.CIRCLE);
        // 字体
        mLegend.setFormSize(4f);
        // 字体颜色
        mLegend.setTextColor(Color.parseColor("#00000000"));
        XAxis xAxis = barChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        xAxis.setSpaceBetweenLabels(2);
//        xAxis.setTextColor(0x000000); // 设置轴标签的颜色。
//        xAxis.setTextSize(18); // 设置轴标签的文字大小。
//        xAxis.setTypeface( ) ;// 设置轴标签的 Typeface。
//        xAxis.setGridColor( int color); /// 设置该轴的网格线颜色。
//        xAxis.setGridLineWidth( float width);// 设置该轴网格线的宽度。
//        xAxis.setAxisLineColor( int color); // 设置轴线的轴的颜色。
//        xAxis.setAxisLineWidth( float width);// 设置该轴轴行的宽度。
//        barChart.animateY(1000); // 立即执行的动画,Y轴

        if (isSlither) {
            //当为true时,放大图
            // 为了使 柱状图成为可滑动的,将水平方向 放大 2.5倍
            barChart.invalidate();
            Matrix mMatrix = new Matrix();
            mMatrix.postScale(2f, 1f);
            barChart.getViewPortHandler().refresh(mMatrix, barChart, false);
            barChart.animateY(1000);
        } else {
            //当为false时 不对图进行操作
            barChart.animateY(1000);
        }


    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dialog.com.mp.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <com.github.mikephil.charting.charts.BarChart
                        android:id="@+id/spreadBarChart"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:layout_gravity="center_horizontal" />

                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <com.github.mikephil.charting.charts.BarChart
                        android:id="@+id/spreadBarChart1"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:layout_gravity="center_horizontal" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <com.github.mikephil.charting.charts.BarChart
                        android:id="@+id/spreadBarChart2"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:layout_gravity="center_horizontal" />
                </LinearLayout>
            </LinearLayout>

            <!--<RelativeLayout-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="wrap_content">-->
            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart2"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->
            <!--</RelativeLayout>-->

            <!--<RelativeLayout-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="wrap_content">-->
            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart3"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->
            <!--</RelativeLayout>-->

            <!--<RelativeLayout-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="wrap_content">-->
            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart4"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->
            <!--</RelativeLayout>-->

            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart5"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->

            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart6"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->

            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart7"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->

            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart8"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->

            <!--<com.github.mikephil.charting.charts.BarChart-->
            <!--android:id="@+id/spreadBarChart9"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="200dp"-->
            <!--android:layout_gravity="center_horizontal"/>-->
        </LinearLayout>
    </ScrollView>

</LinearLayout>

 

转载于:https://my.oschina.net/lijindou/blog/799927

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108742.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • springboot mysql事物_SpringBoot事务详细简介[通俗易懂]

    springboot mysql事物_SpringBoot事务详细简介[通俗易懂]重要概念自动提交模式对于mysql数据库,默认情况下,数据库处于自动提交模式。每一条语句处于一个单独的事务中,在这条语句执行完毕时,如果执行成功则隐式的提交事务,如果执行失败则隐式的回滚事务。对于正常的事务管理,是一组相关的操作处于一个事务之中,因此必须关闭数据库的自动提交模式,下面是查看方式:查看是否自动提交命令(ON表示开启自动提交,值为1,OFF表示关闭自动提交,值为0):showvari…

    2022年6月5日
    91
  • Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

    Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我说几句不相干的废话。不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多高手喜欢把自己的经验写在网上,供大家来学习,我也是从中受惠了很多,在此我深表感谢。可是我发现我却从来没有将自己平时的一些心得拿出来与大家分享,共同学习,太没有奉献精神了。于是我痛定思痛,决定从今天开始写博客,希望可以指点在我后面的开发者,更快地进入Android开发者的行列当中。好了,废话就说这么多,下面开始

    2022年5月8日
    61
  • SQL 清空表数据的方法

    SQL 清空表数据的方法truncatetabletablenamedeletefromtablenamedelete方法最大的问题,当有标志字段时就有问题一般建議盡可能使用delete去刪除表的字段,它具有選擇性刪除的作用,所以常常deletefromtablenamewhere條件delete和truncate作用其實是一樣的,隻是truncate后面不跟where條件句,它的作用是刪除表中所有的行(記錄)兩者最大的區別就是delete是寫日誌文件的,而truncate則不寫日誌直接刪除

    2022年6月5日
    58
  • mongo(三)基本操作

    mongo(三)基本操作

    2021年9月2日
    45
  • 输入内容,出现像Atom + activate-power-mode插件的彩色粒子效果

    输入内容,出现像Atom + activate-power-mode插件的彩色粒子效果最近在看python,然后看到tendcode的评论有个很好玩的效果输入框输入后,会有个彩色的粒子效果,觉得很好看,在网上找了一下,可是没找到对应的案例和实现方法,只看到了Atom编辑器的activate-power-mode插件有同样的效果,最后只有自己看源码,看了半天代码,终于让我把实现代码给找到了,案例在GitHub地址Color-particles里,喜欢的可以下载,下面展示成果…

    2022年7月14日
    19
  • pycharm怎么关闭科学模式_pycharm关闭科学模式

    pycharm怎么关闭科学模式_pycharm关闭科学模式PyCharm在2017.3版本之后加入了ScientificMode,在科学计算时,可以方便的追踪变量变化等。使用NumPy的时候,系统会提示usescientificmode,但进去后就运行程序的在控制台中,很麻烦,想改回来的话按下面步骤取反即可.有时打开了scientificmode时,但文件中引入了numpy等科学计算包时并没有被自动识别,以scientific…

    2022年8月27日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号