MPchart使用详解及详细属性

Posted 2022-07-30 先知丨先觉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MPchart使用详解及详细属性相关的知识，希望对你有一定的参考价值。

项目源代码：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);

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

以上是关于MPchart使用详解及详细属性的主要内容，如果未能解决你的问题，请参考以下文章

Highcharts的基本属性和方法详解-column:柱形图plotOptions的部分修改属性说明

Excel柱状图，由于有正负数，标签被柱子挡住了。如何调整标签和坐标轴之间的距离？

C++类，详解

详解Unity中的各种坐标系

汉诺塔问题详解

AngularJS语法基础及数据绑定——详解各种数据绑定指令属性应用

MPchart使用详解及详细属性

第一步 添加依赖或导入Library

第二步 布局文件

第三步 MainActivity代码

第四步 详细属性介绍

第一步添加依赖或导入Library

第二步布局文件

第四步详细属性介绍