大二下学期每日总结之第一次个人作业（第三阶段）
今日主要学习了使用MPAndroid 柱状图以及利用Fragment和ViewPager实现柱状图与折线图的滑动切换：
1.首先柱状图的使用大体上和折线图一样就是一些样式设定中的细节有差异：对于x轴以及柱顶端显示内容的修改与折线图类似。
if (listwendate != null && listwendate.size() > 0) { List<BarEntry> list = new ArrayList<>(); for (int i = 0; i < listwendate.size(); i++) { list.add(new BarEntry(i, listwendate.get(i).getWendu())); System.out.println(listwendate.get(i).getWendu());//其中两个数字对应的分别是 X轴 Y轴 } BarDataSet barDataSet=new BarDataSet(list,"温度"); barDataSet.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { return ""+listwendate.get(dataSetIndex).getWendu(); } }); BarData barData=new BarData(barDataSet); map_Barchart.setData(barData); map_Barchart.setScaleYEnabled(false); //禁止y轴缩放 map_Barchart.getXAxis().setGranularity(1); map_Barchart.getXAxis().setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float v, AxisBase axisBase) { if (v < listwendate.size()) { String s = String.valueOf(listwendate.get((int) v).getDateandtime()); String[] time=s.split(" "); String month = time[0].substring(5, 7); String day = time[0].substring(8,10); return month + "." + day; } return ""; } }); map_Barchart.getDescription().setEnabled(false);//隐藏右下角英文 map_Barchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//X轴的位置 默认为上面 map_Barchart.getAxisRight().setEnabled(false);//隐藏右侧Y轴 默认是左右两侧都有Y轴 map_Barchart.notifyDataSetChanged(); map_Barchart.invalidate();
2.实现滑动切换柱状图与折线图，这是之前学习的Fragmernt与ViewPager的综合利用：
首先写折线图与柱状图的布局界面：两个基本一样
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:layout_width="350dp" android:layout_height="wrap_content" android:background="@color/teal_200" android:text="折线图" android:textSize="25dp" ></Button> </LinearLayout> <com.github.mikephil.charting.charts.LineChart android:id="@+id/map_Linechart" android:background="@color/white" android:layout_width="match_parent" android:layout_height="200dp" /> </LinearLayout> </RelativeLayout>
再建立一个LineChartFragmetn继承Fragment：
实现onCreateView方法与对应的布局界面连接
接受主页面传来的学号，然后查询数据库，得到图表所需数据：
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.map_line, container, false); Bundle bundle = getArguments(); stuid=bundle.getString("stuid"); map_Linechart=(LineChart)view.findViewById(R.id.map_Linechart); LineMapData(); return view; }
public void LineMapData(){ stuDao=new StuDao(getContext()); liststudate=stuDao.queryData("stuid",stuid); stuDate=liststudate.get(0); wenDao=new WenDao(getContext()); listwendate=wenDao.queryDataFor("stuid",stuid); wenDate=listwendate.get(0); mapLineChart(); }
最后生成图表：
public void mapLineChart(){ if (listwendate != null && listwendate.size() > 0) { List<Entry> list = new ArrayList<>(); for (int i = 0; i < listwendate.size(); i++) { list.add(new Entry(i, listwendate.get(i).getWendu())); System.out.println(listwendate.get(i).getWendu());//其中两个数字对应的分别是 X轴 Y轴 } LineDataSet lineDataSet = new LineDataSet(list, "温度"); lineDataSet.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { return ""+listwendate.get(dataSetIndex).getWendu(); } }); lineDataSet.setColor(getResources().getColor(R.color.teal_200)); //折线颜色 lineDataSet.setFillColor(getResources().getColor(R.color.teal_200)); //折线以下填充颜色 lineDataSet.setDrawFilled(true); //是否填充 lineDataSet.setFillAlpha(10); //填充颜色透明度 lineDataSet.setLineWidth(1f); //折线宽度 //是否画折线点上的空心圆 false表示直接画成实心圆 lineDataSet.setDrawCircleHole(false); lineDataSet.setCircleRadius(2); //圆点的半径 lineDataSet.setValueTextSize(12);//折线字号 LineData lineData = new LineData(lineDataSet); map_Linechart.setData(lineData); map_Linechart.setScaleXEnabled(true); //支持x轴缩放 map_Linechart.setScaleYEnabled(false); //禁止y轴缩 map_Linechart.getXAxis().setGranularity(1); map_Linechart.getXAxis().setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float v, AxisBase axisBase) { if (v < listwendate.size()) { String s = String.valueOf(listwendate.get((int) v).getDateandtime()); String[] time=s.split(" "); String month = time[0].substring(5, 7); String day = time[0].substring(8,10); return month + "." + day; } return ""; } }); map_Linechart.getDescription().setEnabled(false); //隐藏文字介绍 map_Linechart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM); //X轴所在位置 默认为上面 map_Linechart.getLegend().setEnabled(false); //隐藏图例 map_Linechart.getAxisRight().setEnabled(false); //隐藏右边的y轴 //数据更新 map_Linechart.notifyDataSetChanged(); map_Linechart.invalidate(); map_Linechart.animateY(500); //折线在Y轴的动画 参数是动画执行时间 毫秒为单位 } }
主页面要解决传值问题：利用bundle
Bundle bundle = new Bundle(); bundle.putString("stuid",map_stuid.getText().toString()); lineChartFragment.setArguments(bundle); barChartFragment.setArguments(bundle);
接着就是将Fragment加入到ViewPager中：
vpager_one = (ViewPager) findViewById(R.id.map_show); aList = new ArrayList<Fragment>(); aList.add(lineChartFragment); aList.add(barChartFragment); mAdapter = new PagerLIneAdapter(getSupportFragmentManager(),aList); vpager_one.setAdapter(mAdapter);
public class PagerLIneAdapter extends FragmentPagerAdapter { private List<Fragment> viewLists; public PagerLIneAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) { super(fm); this.viewLists = fragmentList; } @NonNull @Override public Fragment getItem(int position) { return viewLists.get(position); } @Override public int getCount() { return viewLists.size(); } }
