用MPAndroidChart实现可滑动的柱状图
来源：互联网 发布：js滑动下拉菜单 编辑：程序博客网 时间：2024/05/16 10:27
摘要: MPAndroidChart并没有提供给滑动柱状图,但是视图是可以放大的,然后就能滑动了,so,嘿嘿嘿
转载时请记得标明源地址：https://my.oschina.net/lijindou/blog/799927
本人博客地址： http://my.oschina.net/lijindou/blog
源码地址:http://download.csdn.net/detail/qq_33144317/9699763
其实原理很简单,就是将视图横向放大,然后 就成了滑动的 柱状图了
我就直接上图上代码了
图:
代码:
MainActivity.java
import android.app.Activity;import android.graphics.Color;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;/** * @author Gold Bean Lee * @time 20161202 */public class MainActivity extends Activity { private BarChart mBarChart; private BarChart mBarChart1; private BarChart mBarChart2; private BarCharts mBarCharts; private String[] color = {"#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD", "#C4FF8E", "#FFF88D", "#FFD38C", "#8CEBFF", "#FF8F9D", "#6BF3AD"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBarCharts = new BarCharts(); // 创建多张图表 mBarChart = (BarChart) findViewById(R.id.spreadBarChart); mBarChart1 = (BarChart) findViewById(R.id.spreadBarChart1); mBarChart2 = (BarChart) findViewById(R.id.spreadBarChart2); mBarCharts.showBarChart(mBarChart, getBarData(10, 99), true); mBarCharts.showBarChart(mBarChart1, getBarData(20, 199), true); mBarCharts.showBarChart(mBarChart2, getBarData(20, 199), false); } /** * 这个方法是初始化数据的 * * @param count X 轴的个数 * @param range Y 轴的数据 */ public BarData getBarData(int count, float range) { 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++) { float value = (float) (Math.random() * range/*100以内的随机数*/) + 3; yValues.add(new BarEntry(value, i)); } // y轴的数据集合 BarDataSet barDataSet = new BarDataSet(yValues, "测试图"); ArrayList<Integer> colors = new ArrayList<>(); for (int i = 0; i < count; i++) {// colors.add(Color.parseColor("#75bfe2")); colors.add(Color.parseColor(color[i])); } barDataSet.setColors(colors); // 设置栏阴影颜色 barDataSet.setBarShadowColor(Color.parseColor("#01000000")); ArrayList<BarDataSet> barDataSets = new ArrayList<>(); barDataSets.add(barDataSet); barDataSet.setValueTextColor(Color.parseColor("#FF8F9D")); // 绘制值 barDataSet.setDrawValues(true); BarData barData = new BarData(xValues, barDataSets); return barData; }}BarCharts.java
import android.graphics.Color;import android.graphics.Matrix;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.data.BarData;/** * @author Gold Bean Lee * @time 20161202 */public class BarCharts { /** * @param barChart 控件 * @param barData 数据 * @param isSlither 用来控制是否可以滑动 */ public void showBarChart(BarChart barChart, BarData barData, boolean isSlither) { //绘制高亮箭头 barChart.setDrawHighlightArrow(false); //设置值显示在柱状图的上边或者下边 barChart.setDrawValueAboveBar(true); //设置绘制网格背景 barChart.setDrawGridBackground(true); //设置双击缩放功能 barChart.setDoubleTapToZoomEnabled(false); //设置规模Y启用 barChart.setScaleYEnabled(false); //设置规模X启用 barChart.setScaleXEnabled(false); //启用设置阻力 barChart.setScaleEnabled(true); //设置每个拖动启用的高亮显示 barChart.setHighlightPerDragEnabled(false); // 设置硬件加速功能 barChart.setHardwareAccelerationEnabled(true); // 设置绘制标记视图 barChart.setDrawMarkerViews(true); // 设置启用日志 barChart.setLogEnabled(true); // 设置突出功能 barChart.setHighlightEnabled(true); // 设置拖动减速功能 barChart.setDragDecelerationEnabled(true); // 数据描述 barChart.setDescription(""); // 如果没有数据的时候，会显示这个，类似ListView的EmptyView barChart.setNoDataTextDescription("没有数据了"); barChart.setNoDataText("O__O …"); // 是否显示表格颜色 barChart.setDrawGridBackground(false); /** * 下面这几个属性你们可以试试 挺有意思的 * */ // 设置是否可以触摸 barChart.setTouchEnabled(isSlither); // 是否可以拖拽 barChart.setDragEnabled(isSlither);//放大可拖拽 // 是否可以缩放 barChart.setScaleEnabled(false); // 集双指缩放 barChart.setPinchZoom(false); // 设置背景 barChart.setBackgroundColor(Color.parseColor("#01000000")); // 如果打开，背景矩形将出现在已经画好的绘图区域的后边。 barChart.setDrawGridBackground(false); // 集拉杆阴影 barChart.setDrawBarShadow(false); // 图例 barChart.getLegend().setEnabled(false); // 设置数据 barChart.setData(barData); // 隐藏右边的坐标轴 (就是右边的0 - 100 - 200 - 300 ... 和图表中横线) barChart.getAxisRight().setEnabled(false); // 隐藏左边的左边轴 (同上) // 网格背景颜色 barChart.setGridBackgroundColor(Color.parseColor("#00000000")); // 是否显示表格颜色 barChart.setDrawGridBackground(false); // 设置边框颜色 barChart.setBorderColor(Color.parseColor("#00000000")); // 说明颜色 barChart.setDescriptionColor(Color.parseColor("#00000000")); // 拉杆阴影 barChart.setDrawBarShadow(false); // 打开或关闭绘制的图表边框。（环绕图表的线） barChart.setDrawBorders(false); Legend mLegend = barChart.getLegend(); // 设置比例图标示 // 设置窗体样式 mLegend.setForm(Legend.LegendForm.CIRCLE); // 字体 mLegend.setFormSize(4f); // 字体颜色 mLegend.setTextColor(Color.parseColor("#00000000")); XAxis xAxis = barChart.getXAxis(); xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setDrawGridLines(false); xAxis.setSpaceBetweenLabels(2);// xAxis.setTextColor(0x000000); // 设置轴标签的颜色。// xAxis.setTextSize(18); // 设置轴标签的文字大小。// xAxis.setTypeface( ) ;// 设置轴标签的 Typeface。// xAxis.setGridColor( int color); /// 设置该轴的网格线颜色。// xAxis.setGridLineWidth( float width);// 设置该轴网格线的宽度。// xAxis.setAxisLineColor( int color); // 设置轴线的轴的颜色。// xAxis.setAxisLineWidth( float width);// 设置该轴轴行的宽度。// barChart.animateY(1000); // 立即执行的动画,Y轴 if (isSlither) { //当为true时,放大图 // 为了使 柱状图成为可滑动的,将水平方向 放大 2.5倍 barChart.invalidate(); Matrix mMatrix = new Matrix(); mMatrix.postScale(2f, 1f); barChart.getViewPortHandler().refresh(mMatrix, barChart, false); barChart.animateY(1000); } else { //当为false时 不对图进行操作 barChart.animateY(1000); } }}activity_main.xml
<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="dialog.com.mp.MainActivity"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <com.github.mikephil.charting.charts.BarChart android:id="@+id/spreadBarChart" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center_horizontal" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <com.github.mikephil.charting.charts.BarChart android:id="@+id/spreadBarChart1" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center_horizontal" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <com.github.mikephil.charting.charts.BarChart android:id="@+id/spreadBarChart2" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center_horizontal" /> </LinearLayout> </LinearLayout> <!--<RelativeLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="wrap_content">--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart2"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--</RelativeLayout>--> <!--<RelativeLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="wrap_content">--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart3"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--</RelativeLayout>--> <!--<RelativeLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="wrap_content">--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart4"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--</RelativeLayout>--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart5"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart6"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart7"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart8"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> <!--<com.github.mikephil.charting.charts.BarChart--> <!--android:id="@+id/spreadBarChart9"--> <!--android:layout_width="match_parent"--> <!--android:layout_height="200dp"--> <!--android:layout_gravity="center_horizontal"/>--> </LinearLayout> </ScrollView></LinearLayout> 0 0
- 用MPAndroidChart实现可滑动的柱状图
- 关于MPAndroidChart柱状图左右滑动
- 关于MPAndroidChart柱状图左右滑动
- MPAndroidChart柱状图
- 用gallery实现可滑动的Tab
- 自己绘制的可点击，可滑动，可动态添加的柱状图
- 实现柱状图与条形图的结合，MPAndroidChart的简单使用
- MPAndroidChart直方图、多组(可滑动、渐变可以看博主前面讲直方图的博客)
- MPAndroidChart bar宽度固定且可左右滑动
- android中MpandroidChart柱状图
- android柱状图和饼状图的简单使用（MPAndroidChart）
- MPAndroidChart设置柱状图中每个柱状的宽度
- MPAndroidChart与ViewPager的滑动冲突处理
- Android-->实现可滑动删除的Layout
- ionic实现可滑动的tab
- 可滑动Header控件的实现
- Android图表控件MPAndroidChart——柱状图BarChart的使用（多条柱状图）
- 实现自定义android柱状图控件！可显示气温！可相应点击事件的回调！
- 【算法概论】6.动态规划
- uniform 中checkbox通过jquery 选中
- 稳定排序和不稳定排序
- 闰年的计算问题
- Spring Boot整合UEditor，解决找不到上传文件的问题
- 用MPAndroidChart实现可滑动的柱状图
- 预编译头超出上限错误 就是include比较多
- MTK平台内置应用Android.mk文件编写
- C# CookieHelper.cs!
- yarn介绍
- ios学习--Runtime的使用场景
- jQuery 插件autocomplete 应用
- configure常用参数说明
- 自增自减运算
