MPchart使用详解及详细属性（一）

先知先觉

发布于 2019-01-21 16:23:50

6.8K0

发布于 2019-01-21 16:23:50

项目源代码：https://github.com/libin7278/MpChart

第一步添加依赖或导入Library

    dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.github.PhilJay:MPAndroidChart:v2.2.3'
}

github：https://github.com/PhilJay/MPAndroidChart

第二步布局文件

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:textSize="30sp"
        android:textColor="#ff00ff"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MPchartDemo"/>


    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/day_fragment_bar_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/seekBar1" />
</LinearLayout>

第三步 MainActivity代码

package com.tunshu.mydemo;

import android.app.Activity;
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;


public class MainActivity extends Activity {
    private BarChart day_fragment_bar_chart;
    private BarData mBarData;

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

        day_fragment_bar_chart= (BarChart) findViewById(R.id.day_fragment_bar_chart);

        //getBarData(X轴坐标个数, X所对应的值也就是Y值)
        mBarData = getBarData(24, 10);
        showBarChart(day_fragment_bar_chart, mBarData);

    }

    /**
     *用来处理视图的方法
     */
    private void showBarChart(BarChart barChart, BarData barData) {

    }

    /**
     *用来处理数据的方法
     */
    private BarData getBarData(int count, float range) {
        ArrayList<String> xValues = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            xValues.add(i + "");
        }

        ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();

        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, "collection");

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

        BarData barData = new BarData(xValues, barDataSet);

        return barData;
    }
}

在MainActivity中已经封装好了处理数据和视图的方法；

第四步详细属性介绍

private void showBarChart(BarChart barChart, BarData barData) {
        // 如果没有数据的时候，会显示这个，类似ListView的EmptyView
        barChart.setNoDataTextDescription("You need to provide data for the chart.");
    }

private void showBarChart(BarChart barChart, BarData barData) {
        barChart.setData(barData); // 设置数据
    }

barChart.setDrawBorders(true); //是否在折线图上添加边框

barChart.setDescription("数据描述");// 数据描述
barChart.setDescriptionPosition(100,20);//数据描述的位置
barChart.setDescriptionColor(Color.GRAY);//数据的颜色
barChart.setDescriptionTextSize(40);//数据字体大小

如果此处不想要描述必须要设置 barChart.setDescription(“”);不然会显示默认的 Description。

barChart.setDrawGridBackground(true); // 是否显示表格颜色
barChart.setGridBackgroundColor(Color.RED); // 表格的的颜色

barChart.setTouchEnabled(false); // 设置是否可以触摸
barChart.setDragEnabled(false);// 是否可以拖拽
barChart.setScaleEnabled(false);// 是否可以缩放
barChart.setPinchZoom(false);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放

barChart.setBackgroundColor(Color.BLACK);// 设置整个图表控件的背景

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

barChart.setDrawValueAboveBar(false);//柱状图上面的数值是否在柱子上面

//是否显示竖直标尺线
barChart.getXAxis().setDrawGridLines(false);

//设置横坐标显示的间隔数
barChart.getXAxis().setLabelsToSkip(4);

//设置横坐标倾斜角度
barChart.getXAxis().setLabelRotationAngle(20);

//设置横坐标之间的间隔距离 float值 
//不能与setLabelsToSkip()一起使用否则失效
barChart.getXAxis().setSpaceBetweenLabels(50);

//是否显示X轴数值
//默认是true
barChart.getXAxis().setDrawLabels(false);

//右侧是否显示Y轴数值
barChart.getAxisRight().setDrawLabels(false);

//是否显示最右侧竖线
barChart.getAxisRight().setEnabled(false);

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

 public class MyYAxisValueFormatter implements YAxisValueFormatter {

        private DecimalFormat mFormat;

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

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

//设置比例图标的位置  barChart.getLegend().setPosition(Legend.LegendPosition.RIGHT_OF_CHART);
//设置比例图标和文字之间的位置方向barChart.getLegend().setDirection(Legend.LegendDirection.RIGHT_TO_LEFT);
barChart.getLegend().setTextColor(Color.RED);

//设置动画
barChart.animateXY(2000,3000);

// y轴的数据集合
BarDataSet barDataSet = new BarDataSet(yValues, "collection");

barDataSet.setBarSpacePercent(80);
barDataSet.setVisible(true);//是否显示柱状图柱子
barDataSet.setColor(Color.RED);//设置柱子颜色
barDataSet.setDrawValues(false);//是否显示柱子上面的数值

package com.tunshu.mydemo;

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

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.formatter.YAxisValueFormatter;

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


public class MainActivity extends Activity {
    private BarChart day_fragment_bar_chart;
    private BarData mBarData;

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

        day_fragment_bar_chart= (BarChart) findViewById(R.id.day_fragment_bar_chart);

        mBarData = getBarData(24, 10);
        showBarChart(day_fragment_bar_chart, mBarData);

    }

    private void showBarChart(BarChart barChart, BarData barData) {
        // 如果没有数据的时候，会显示这个，类似ListView的EmptyView
        barChart.setNoDataTextDescription("You need to provide data for the chart.");

        barChart.setData(barData); // 设置数据

        barChart.setDrawBorders(false); //是否在折线图上添加边框

        barChart.setDescription("数据描述");// 数据描述
        barChart.setDescriptionPosition(100,20);//数据描述的位置
        barChart.setDescriptionColor(Color.RED);//数据的颜色
        barChart.setDescriptionTextSize(40);//数据字体大小

        barChart.setDrawGridBackground(false); // 是否显示表格颜色
        barChart.setGridBackgroundColor(Color.RED); // 表格的的颜色
        //barChart.setBackgroundColor(Color.BLACK);// 设置整个图标控件的背景
        barChart.setDrawBarShadow(false);//柱状图没有数据的部分是否显示阴影效果

        barChart.setTouchEnabled(false); // 设置是否可以触摸
        barChart.setDragEnabled(false);// 是否可以拖拽
        barChart.setScaleEnabled(false);// 是否可以缩放
        barChart.setPinchZoom(false);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放

        barChart.setDrawValueAboveBar(true);//柱状图上面的数值显示在柱子上面还是柱子里面

        barChart.getXAxis().setDrawGridLines(false);//是否显示竖直标尺线
        barChart.getXAxis().setLabelsToSkip(11);//设置横坐标显示的间隔
//        barChart.getXAxis().setLabelRotationAngle(20);//设置横坐标倾斜角度
//        barChart.getXAxis().setSpaceBetweenLabels(50);
        barChart.getXAxis().setDrawLabels(true);//是否显示X轴数值
        barChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//设置X轴的位置 默认在上方

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


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

        barChart.getLegend().setPosition(Legend.LegendPosition.RIGHT_OF_CHART);//设置比例图标的位置
        barChart.getLegend().setDirection(Legend.LegendDirection.RIGHT_TO_LEFT);//设置比例图标和文字之间的位置方向
        barChart.getLegend().setTextColor(Color.RED);

        barChart.animateXY(2000,3000);
    }

    private BarData getBarData(int count, float range) {
        ArrayList<String> xValues = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            xValues.add(i + "");
        }

        ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();

        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, "collection");

        barDataSet.setBarSpacePercent(80);
        barDataSet.setVisible(true);//是否显示柱状图柱子
        barDataSet.setColor(Color.RED);//设置柱子颜色
        barDataSet.setDrawValues(false);//是否显示柱子上面的数值

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

        BarData barData = new BarData(xValues, barDataSet);

        return barData;
    }

    public class MyYAxisValueFormatter implements YAxisValueFormatter {

        private DecimalFormat mFormat;

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

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

//设置Y轴显示数量
barChart.getAxisLeft().setLabelCount(2,false);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016年04月28日，如有侵权请联系 cloudcommunity@tencent.com 删除

github

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

MPchart使用详解及详细属性（一）

MPchart使用详解及详细属性（一）

第一步添加依赖或导入Library

第二步布局文件

第三步 MainActivity代码

第四步详细属性介绍

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

MPchart使用详解及详细属性（一）

MPchart使用详解及详细属性（一）

第一步 添加依赖或导入Library

第二步 布局文件

第三步 MainActivity代码

第四步 详细属性介绍

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第一步添加依赖或导入Library

第二步布局文件

第四步详细属性介绍