冒充前言的前言

最开始项目说用柱状图,后来被折线图给取代了,之前实现的一个小Demo,贴出来,希望对大家能有帮助。

先看效果:

android 单柱柱状图 安卓柱状图控件_柱状图


step1:下载mpchartlib.jar,放进项目,add as library即可。


step2:放入布局文件中,如下所示:

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barchart"
        android:layout_width="match_parent"
        android:layout_height="260dp" />

step3:在Activity中找到控件,然后设置相应的属性以及填充数据(copy整个类啦,这样实现也方便一些)

public class MyBarChartActivity extends AppCompatActivity {
    private BarChart barChart;
    private List<Float> listData;

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

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

    private void initView() {
        listData = new ArrayList<>();
        barChart = (BarChart) findViewById(R.id.barchart);
    }

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

    private void showBarChart(int count) {//count表示横坐标个数
        initSrc();
        initXAxis();
        BarData barData = getBarData(count);

        barChart.setData(barData); // 设置数据
        barChart.invalidate();//刷新图表
    }

    private void initSrc() {
        // 如果没有数据的时候,会显示这个,类似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(Color.BLUE); // 表格的的颜色
        barChart.setBackgroundColor(Color.WHITE);// 设置整个图标控件的背景

        barChart.setDrawBarShadow(false);//柱状图没有数据的部分是否显示阴影效果

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

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

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

        ValueFormatter custom = new MyYAxisValueFormatter();//自定义Y轴文字样式
        barChart.getAxisLeft().setValueFormatter(custom);

        MyBarMarkerView mv = new MyBarMarkerView(this, R.layout.custom_marker_view);
        barChart.setMarkerView(mv);
    }

    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(true);

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

    private BarData getBarData(int count) {
        //count  x轴个数
        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++) {
            yValues.add(new BarEntry(listData.get(i), i));
        }

        // y轴的数据集合
        BarDataSet barDataSet = new BarDataSet(yValues, "");
        barDataSet.setLabel("我的大柱子");
        barDataSet.setBarSpacePercent(50);//设置柱子之间的宽度
        barDataSet.setVisible(true);//是否显示柱状图柱子
        barDataSet.setColor(0xff1AA9E9);//设置柱子颜色
        barDataSet.setDrawValues(false);//是否显示柱子上面的数值

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

        BarData barData = new BarData(xValues, barDataSet);

        return barData;
    }

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

        private DecimalFormat mFormat;

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

        @Override
        public String getFormattedValue(float value) {
            return mFormat.format(value) + "k";
        }
    }
}

step4:layout.custom_marker_view.xml

<TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_centerHorizontal="true"
        android:textSize="9sp"
        android:textColor="#148CEF" />

step5: MyBarMarkerView .class

public class MyBarMarkerView extends MarkerView {
    private TextView tvContent;

    public MyBarMarkerView(Context context, int layoutResource) {
        super(context, layoutResource);
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content
    @Override
    public void refreshContent(Entry e, int dataSetIndex) {
        if (e instanceof CandleEntry) {
            CandleEntry ce = (CandleEntry) e;
//            tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));//值为四舍五入后的整数
            tvContent.setText("" + ce.getHigh());
        } else {
//            tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));//值为四舍五入后的整数
            tvContent.setText("" + e.getVal());
        }
    }

    @Override
    public int getXOffset() {//设置偏移量
            return -getMeasuredWidth()/2;
    }

    @Override
    public int getYOffset() {//设置偏移量
        return -getMeasuredHeight();
    }
}

**冒充后记的后记** 

 1. 如果想要左右滑动效果,必须设置可触摸、可拖拽,并且设置柱子的间距(宽度根据需要设置)
 2. 如果不想要左右滑动效果,设置可触摸(点击柱子显示数值用),不可拖拽,并且合理设置柱子的间距就好。
 3. 解释权归本人所有,欢迎批评指正。
 
>