Android中mpchartlib柱状图的详细属性以及实现（可左右滑动可点击）
程序员文章站
2022-05-12 16:12:36
...
冒充前言的前言
最开始项目说用柱状图，后来被折线图给取代了，之前实现的一个小Demo，贴出来，希望对大家能有帮助。
先看效果：
step1：下载mpchartlib.jar，放进项目，add as library即可。
jar包下载地址：
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();
}
}
冒充后记的后记
- 如果想要左右滑动效果，必须设置可触摸、可拖拽，并且设置柱子的间距（宽度根据需要设置）
- 如果不想要左右滑动效果，设置可触摸（点击柱子显示数值用），不可拖拽，并且合理设置柱子的间距就好。
- 解释权归本人所有，欢迎批评指正。
源码下载：