Android图表
本文记录自身学习状态,也为初学者提供方便,高手可以避让撸代码去。
先看下运行效果:
这块的折线图、饼状图采用的是hellochart,开源库,github地址:
https://github.com/lecho/hellocharts-android
实现步骤如下:
1、下载jar包 ,在github上下载jar包到本地,复制到项目libs目录下并添加依赖。
jar下载:https://github.com/lecho/hellocharts-android/releases
本地目录及依赖如下:
2、布局文件,添加控件如下:
<?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" android:orientation="vertical" tools:context="com.demo.jinjin.chart.MainActivity"> <lecho.lib.hellocharts.view.LineChartView android:id="@+id/lcv_demo" android:layout_width="match_parent" android:layout_height="0dp" android:layout_margin="20dp" android:layout_weight="1"/> <lecho.lib.hellocharts.view.PieChartView android:id="@+id/pcv_demo" android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>3、控件绑定,数据设置:
1)折线图设置如下,下面都有详细注释:
ArrayList<Line> lines = new ArrayList<Line>(); ArrayList<PointValue> values = new ArrayList<PointValue>(); /* 添加坐标点值 */ values.add(new PointValue(1, 2)); values.add(new PointValue(2, 2)); values.add(new PointValue(3, 4)); values.add(new PointValue(4, 5)); values.add(new PointValue(5, 3)); values.add(new PointValue(6, 6)); values.add(new PointValue(7, 8)); Line line = new Line(values); /* 设置坐标线的各个信息 */ line.setColor(Color.BLUE);//线的颜色 line.setPointColor(Color.RED);//点的颜色 line.setCubic(true);//设置曲线是否平滑 line.setHasLabels(true);//曲线数据坐标是否加备注 line.setHasLabelsOnlyForSelected(false);//点击坐标提示数据(设置上一条之后就无用) line.setHasPoints(true);//是否显示原点 line.setShape(ValueShape.CIRCLE);//设置点的形状 line.setStrokeWidth(1);//设置线宽 line.setPointRadius(2);//设置点的大小 line.setHasLines(true);//是否用直线显示(false则为各个分散的点) line.setFilled(false);//是否填充曲线的面积 lines.add(line);//添加线到线的集合 LineChartData data = new LineChartData(lines); //设置字背景颜色 data.setValueLabelBackgroundColor(Color.WHITE); //设置字体颜色 data.setValueLabelsTextColor(Color.GRAY); ArrayList<AxisValue> axisValues = new ArrayList<AxisValue>(); for (int i = 0; i < 10; i++) { axisValues.add(new AxisValue(i)); } /* X坐标 */ Axis axisX = new Axis(axisValues); Axis axisY = new Axis(axisValues); axisX.setName("星期"); axisX.setLineColor(Color.BLUE); axisX.setInside(false); data.setAxisXBottom(axisX); /* Y坐标 */ axisY.setName("天气"); axisY.setLineColor(Color.BLUE); axisY.setInside(false); axisY.setHasLines(true); data.setAxisYLeft(axisY); data.setBaseValue(Float.NEGATIVE_INFINITY); mLcvDemo.setLineChartData(data);2)饼形图设置如下,下面都有详细注释:
ArrayList<SliceValue> values = new ArrayList<SliceValue>(); /* 添加饼图数据 */ values.add(new SliceValue(35,Color.BLUE)); values.add(new SliceValue(25,Color.RED)); values.add(new SliceValue(10,Color.GRAY)); values.add(new SliceValue(20,Color.YELLOW)); values.add(new SliceValue(10,Color.LTGRAY)); values.add(new SliceValue(5,Color.MAGENTA)); PieChartData data = new PieChartData(values); /* 显示数据 */ data.setHasLabels(true); /* 设置中间圆的内容 */ data.setCenterText1("Center"); data.setHasCenterCircle(true);//是否有中间圆 data.setCenterCircleScale(0.2f);//中间圆的占比 data.setCenterCircleColor(Color.GREEN);//中间圆的颜色 data.setCenterText1FontSize(12);//中间的字体大小 mPcvDemo.setPieChartData(data); mPcvDemo.setChartRotationEnabled(true);//是否支持手动转动
Demo下载:Demo