MPChar条形图的简单使用
添加依赖
在app下的build.gradle下添加
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.0'
}
在最外层的build.gradle下添加
allprojects {
repositories {
maven {url "https://jitpack.io"}
}
}
然后就可以画条形图了
1,设置布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main2Activity">
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/mBarChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
2,加载控件,设置一些手势,和监听
private void init() {
//条形图
mBarChart = findViewById(R.id.mBarChart);
//设置表格上的点,被点击的时候,的回调函数
mBarChart.setOnChartValueSelectedListener(this);
mBarChart.setDrawBarShadow(false);
mBarChart.setDrawValueAboveBar(true);
//不显示描述
mBarChart.getDescription().setEnabled(false);
//最大可以绘制的数目
mBarChart.setMaxVisibleValueCount(60);
//如果设为真,x轴和y轴可以用两个手指同时缩放,如果为假,
//x轴和y轴可以单独缩放。默认值:假
mBarChart.setPinchZoom(false);
//是否显示表格颜色
mBarChart.setDrawGridBackground(false);
}
3,画x,和y轴,并设置属性
XAxis xAxis = mBarChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//设置x轴标签的位置
//设置缩放时轴的最小间隔。轴不允许往下走
//*限制。这可以用于在缩放时避免标签重复。
xAxis.setGranularity(1f);
//设置显示多少个标签
xAxis.setLabelCount(150);
xAxis.setAxisMaximum(50);//x轴最大值
xAxis.setAxisMinimum(0f);//x轴最小值
xAxis.setDrawGridLines(false);//去掉网格线
//设置数据
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int x = (count* (int) value)/2 ;
if (x == 0 ||x>60 )
return "";
if (x<10)
return "0"+x;
return x+"";
}
@Override
public int getDecimalDigits() {
return 0;
}
});
//左边的y轴
YAxis leftYAxis = mBarChart.getAxisLeft();
//第二个参数如果启用,将强制设置标签计数,这意味着精确的指定的标签数量
// 沿着轴线画并均匀分布——这可能会导致标签 数值不均匀
leftYAxis.setLabelCount(8,false);
leftYAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
//将顶部轴空间设置为全范围的百分比。默认10 f
leftYAxis.setSpaceTop(30f);
leftYAxis.setAxisMaximum(150f);
leftYAxis.setAxisMinimum(0f);
// leftYAxis.setDrawGridLines(false);//去掉网格线
//右边的y轴
YAxis rightYAxis = mBarChart.getAxisRight();
rightYAxis.setLabelCount(8,false);
rightYAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
rightYAxis.setSpaceTop(15f);
rightYAxis.setAxisMaximum(150f);
rightYAxis.setAxisMinimum(0f);
//设置标识
Legend l = mBarChart.getLegend();
//设置垂直对齐
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
//设置在表内显示还是在表外显示
l.setDrawInside(true);
l.setForm(Legend.LegendForm.SQUARE);//样式
l.setFormSize(10f);//字体
l.setTextSize(20f);//设置文本标签大小
//设置横轴上的图例条目之间的空间
l.setXEntrySpace(30f);
我们对x轴设置了数据,通过调用setValueFormatter 方法,实现特定的接口就可以设置数据,
**但是注意:数据显示的位置 和要显示多少个数据(数据也就是标签) 是 由你设置了多少个标签决定的,标签会随着x轴的大小而发生改变,所以一定要把握好 距离和标签。**
4,然后就是设置条形图的数据了
Random random = new Random();
ArrayList<BarEntry> value = new ArrayList<>();
int x = 0;
for (int i = 0; i < 20; i++) {
x += 2;
value.add(new BarEntry(x,random.nextInt( 100)+1));
}
BarDataSet set1 ;
if (mBarChart.getData()!= null &&
mBarChart.getData().getDataSetCount() >0){
set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);
set1.setValues(value);
mBarChart.getData().notifyDataChanged();
mBarChart.notifyDataSetChanged();
}else {
//创建一个数据集
set1 = new BarDataSet(value,"2019年工资涨幅");
//在这里摄制条形图(柱子)的一些属性
set1.setColors(ColorTemplate.MATERIAL_COLORS); //设置有四种颜色
BarData barData = new BarData(set1);
barData.setValueTextSize(20f);
barData.setBarWidth(0.9f);
//设置数据
mBarChart.setData(barData);
}
上面设置数据的时候x轴的坐标是偶数,这个他柱子之间就有间距,比较好看,y轴的数据就是随机数了。
最后添加一些属性 然后将数据给BarChart就好了。
效果如下所示
完整代码如下所示
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main2Activity">
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/mBarChart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
package m.com.mpchart;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.AxisBase;
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.data.Entry;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.listener.OnChartValueSelectedListener;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
import java.util.Random;
public class Main2Activity extends AppCompatActivity implements OnChartValueSelectedListener {
private BarChart mBarChart;
private int count = 3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
init();
draw();
setData();
}
private void setData() {
Random random = new Random();
ArrayList<BarEntry> value = new ArrayList<>();
int x = 0;
for (int i = 0; i < 20; i++) {
x += 2;
value.add(new BarEntry(x,random.nextInt( 100)+1));
}
BarDataSet set1 ;
if (mBarChart.getData()!= null &&
mBarChart.getData().getDataSetCount() >0){
set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);
set1.setValues(value);
mBarChart.getData().notifyDataChanged();
mBarChart.notifyDataSetChanged();
}else {
set1 = new BarDataSet(value,"2019年工资涨幅");
//设置有四种颜色
set1.setColors(ColorTemplate.MATERIAL_COLORS);
BarData barData = new BarData(set1);
barData.setValueTextSize(20f);
barData.setBarWidth(0.9f);
//设置数据
mBarChart.setData(barData);
}
}
//绘制x和y轴
private void draw() {
XAxis xAxis = mBarChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//设置x轴标签的位置
//设置缩放时轴的最小间隔。轴不允许往下走
//*限制。这可以用于在缩放时避免标签重复。
xAxis.setGranularity(1f);
//设置显示多少个标签
xAxis.setLabelCount(150);
xAxis.setAxisMaximum(50);//x轴最大值
xAxis.setAxisMinimum(0f);//x轴最小值
xAxis.setDrawGridLines(false);//去掉网格线
//设置数据
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int x = (count* (int) value)/2 ;
if (x == 0 ||x>60 )
return "";
if (x<10)
return "0"+x;
return x+"";
}
@Override
public int getDecimalDigits() {
return 0;
}
});
//左边的y轴
YAxis leftYAxis = mBarChart.getAxisLeft();
//第二个参数如果启用,将强制设置标签计数,这意味着精确的指定的标签数量
// 沿着轴线画并均匀分布——这可能会导致标签 数值不均匀
leftYAxis.setLabelCount(8,false);
leftYAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
//将顶部轴空间设置为全范围的百分比。默认10 f
leftYAxis.setSpaceTop(30f);
leftYAxis.setAxisMaximum(150f);
leftYAxis.setAxisMinimum(0f);
// leftYAxis.setDrawGridLines(false);//去掉网格线
YAxis rightYAxis = mBarChart.getAxisRight();
rightYAxis.setLabelCount(8,false);
rightYAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
rightYAxis.setSpaceTop(15f);
rightYAxis.setAxisMaximum(150f);
rightYAxis.setAxisMinimum(0f);
//设置标识
Legend l = mBarChart.getLegend();
//设置垂直对齐
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
//设置在表内显示还是在表外显示
l.setDrawInside(true);
l.setForm(Legend.LegendForm.SQUARE);//样式
l.setFormSize(10f);//字体
l.setTextSize(20f);//设置文本标签大小
//设置横轴上的图例条目之间的空间
l.setXEntrySpace(30f);
}
//加载控件,设置一些手势,和监听
private void init() {
//条形图
mBarChart = findViewById(R.id.mBarChart);
//设置表格上的点,被点击的时候,的回调函数
mBarChart.setOnChartValueSelectedListener(this);
mBarChart.setDrawBarShadow(false);
mBarChart.setDrawValueAboveBar(true);
//不显示描述
mBarChart.getDescription().setEnabled(false);
//最大可以绘制的数目
mBarChart.setMaxVisibleValueCount(60);
//如果设为真,x轴和y轴可以用两个手指同时缩放,如果为假,
//x轴和y轴可以单独缩放。默认值:假
mBarChart.setPinchZoom(false);
//是否显示表格颜色
mBarChart.setDrawGridBackground(false);
}
@Override
public void onValueSelected(Entry e, Highlight h) {
}
@Override
public void onNothingSelected() {
}
}
效果如图