MPAndroidChart多组柱状图的显示

最新推荐文章于 2025-02-18 23:19:08 发布

原创最新推荐文章于 2025-02-18 23:19:08 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#MPAndroidChart #多组柱状图

技术专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用MPAndroidChart库在Android应用中创建一个具备X轴和Y轴缩放功能的复杂柱状图，并实现点击柱状图查看详细数据的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看看要做的图表原型案例 , 要实现X轴缩放, Y轴缩放, 点击柱状图可以查看详情,

要点一. 要实现X轴的数据是文字不是时间数字等可以排序的内容

要点二. 多组数据的展示放大. 缩小不走样 , 可以自由的滑动

1. 首先引入开源库

在项目根目录的build.gradle文件中加入如下代码

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

在app根目录的buil.gradle文件中加入依赖

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

2. xml 中的布局

<com.github.mikephil.charting.charts.BarChart
android:id="@+id/chart1"
android:layout_width="match_parent"

android:layout_height="match_parent"/>

3. 在Activity中的操作

mChart =(BarChart)findViewById(R.id.chart1);
mChart.getDescription().setEnabled(false); //设置图标的描述
mChart.setPinchZoom(false); //缩放变焦
mChart.setDrawBarShadow(false); //
mChart.setDrawGridBackground(false);
mChart.setExtraBottomOffset(15f); //整体距底边15f

// create a custom MarkerView (extend MarkerView) and specify the layout
// to use for it
//标记的view
MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
mv.setChartView(mChart); // For bounds control

mChart.setMarker(mv); // Set the marker to the chart

4. 对表头的设置

Legend l = mChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); //商品A销量 , 商品B销量的位置
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);//商品A销量 , 商品B销量的位置
l.setOrientation(Legend.LegendOrientation.VERTICAL);
l.setDrawInside(true);
l.setTypeface(mTfLight);
l.setYOffset(0f);
l.setXOffset(10f);
l.setYEntrySpace(0f);

l.setTextSize(8f);

5. 对X轴的设置

XAxis xAxis = mChart.getXAxis();
xAxis.setTypeface(mTfLight);
xAxis.setGranularity(1f);
xAxis.setDrawGridLines(true);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

xAxis.setCenterAxisLabels(true);

6. 对Y轴的设置

YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTypeface(mTfLight);
leftAxis.setValueFormatter(new LargeValueFormatter());
leftAxis.setDrawGridLines(false);
leftAxis.setSpaceTop(35f);
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

mChart.getAxisRight().setEnabled(false); //不使用右侧Y轴

7. 设置数据

private void setData() {
float groupSpace = 0.25f; // 0.25
float barSpace = 0.05f; // x4 DataSet 0.05 0.15
float barWidth = 0.2f; // x4 DataSet 0.2 0.6
//***这个必须满足否则绘出的柱形图很不规则***
// (0.05+0.2)*3 + 0.25 = 1

int mSeekBarX = 6; //
int mSeekBarY = 100;

/* 可以灵活去添加
List<String> list = new ArrayList<>();
for (int x = 0 ;x<mSeekBarX;x++){
list.add("A"+x);
}
mChart.getXAxis().setValueFormatter(new StringXAxisFormatter(list));
*/

//这里为了方便写死了,

mLabels = new String[] {"甲骨文","海康","大华", "飞翔", "阿里巴巴","网易"};

// 对X轴格式的设置

mChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(mLabels));
mChart.getXAxis().setLabelCount(mSeekBarX);

ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
ArrayList<BarEntry> yVals2 = new ArrayList<BarEntry>();
ArrayList<BarEntry> yVals3 = new ArrayList<BarEntry>();
// yVals4 第四个柱状图不用,可以不管
ArrayList<BarEntry> yVals4 = new ArrayList<BarEntry>();

float randomMultiplier = mSeekBarY * 100f;

for (int i = 0; i < mSeekBarX; i++) { //每个公司每年的数据
yVals1.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
yVals2.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
yVals3.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
yVals4.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
}

BarDataSet set1, set2, set3, set4;

if (mChart.getData() != null && mChart.getData().getDataSetCount() > 0) {
set1 = (BarDataSet) mChart.getData().getDataSetByIndex(0);
set2 = (BarDataSet) mChart.getData().getDataSetByIndex(1);
set3 = (BarDataSet) mChart.getData().getDataSetByIndex(2);
set4 = (BarDataSet) mChart.getData().getDataSetByIndex(3);
set1.setValues(yVals1); //A公司的所有年份数据
set2.setValues(yVals2);
set3.setValues(yVals3);
set4.setValues(yVals4);
mChart.getData().notifyDataChanged();
mChart.notifyDataSetChanged();
} else {
// create 4 DataSets
set1 = new BarDataSet(yVals1, "商品A销量");
set1.setColor(Color.rgb(0, 153, 255));
set2 = new BarDataSet(yVals2, "商品B销量");
set2.setColor(Color.rgb(255, 153, 102));
set3 = new BarDataSet(yVals3, "商品C销量");
set3.setColor(Color.rgb(51, 153, 153));
set4 = new BarDataSet(yVals4, "商品D销量");
set4.setColor(Color.rgb(255, 102, 0));

//将数据放入 BarData , 只需要三条柱所以set4就没有放入
BarData data = new BarData(set1, set2, set3); //,set4
data.setValueFormatter(new LargeValueFormatter());
data.setValueTypeface(mTfLight);
mChart.setData(data);
}

//设置柱状图的宽度及字体大小等等
mChart.getBarData().setBarWidth(barWidth);
mChart.getBarData().setValueTextSize(7f);
// restrict the x-axis range
mChart.getXAxis().setAxisMinimum(0);

// barData.getGroupWith(...) is a helper that calculates the width each group needs based on the provided parameters
mChart.getXAxis().setAxisMaximum(0 + mChart.getBarData().getGroupWidth(groupSpace, barSpace) * mSeekBarX);
mChart.groupBars(0, groupSpace, barSpace);
mChart.invalidate(); //刷新图表

}

8. 点击柱状图查看详情

mChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry e, Highlight h) {
if (e == null)
return;
RectF bounds = mOnValueSelectedRectF;
mChart.getBarBounds((BarEntry) e, bounds);
MPPointF position = mChart.getPosition(e, YAxis.AxisDependency.LEFT);
BarEntry barEntry = (BarEntry) e;
float y = barEntry.getY();

int x = (int)barEntry.getX();

Log.i("X",mLabels[x]+"----" + "Y"+String.valueOf(y));
MPPointF.recycleInstance(position);
}

@Override
public void onNothingSelected() {
Log.i("Activity", "Nothing selected.");
}

});

最后完整的Dome下载