膜拜了些大神的笔记，觉得十分有用，附上网址：
1.很好上手的折线图：
手把手教你实现折线图之——安卓最好用的图表库hellocharts之最详细的使用介绍 - q2nAmor - CSDN博客 http://blog.csdn.net/u012534831/article/details/51505683
2.特别齐全的各种图表，简直牛掰啦：
hellocharts-android开源图表库（效果非常好） - 泡在网上的日子 http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1107/1930.html
效果如图所示：
1.在app的gradle里声明一下：
//引入hellocharts图表插件
compile 'com.github.lecho:hellocharts-android:v1.5.8'2.在libs文件家里添加jar包
可以进行各种编码了。
补充代码：
1.activity的xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/linechart"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="300dp"/>
</LinearLayout>2.acitivty的代码：
//libs文件夹里放入了hellocharts工具包插件
public class LineChartActivity extends AppCompatActivity {
@BindView(R.id.linechart)
LineChartView lineChart;
String[] date = {"5-23","5-22","6-22","5-23","5-22","2-22","5-22","4-22","9-22","10-22","11-22",
"12-22","1-22","6-22","5-23","5-22","2-22","5-22","4-22",
"9-22","10-22","11-22","12-22","4-22","9-22","10-22","11-22","zxc"};//X轴的标注
int[] score= {74,22,18,79,20,74,20,74,42,90,74,42,90,50,42,90,
33,10,74,22,18,79,20,74,22,18,79,20};//图表的数据
private List<PointValue> mPointValues = new ArrayList<PointValue>();
private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_linechart);
ButterKnife.bind(this);
getAxisXLables();//获取x轴的标注
getAxisPoints();//获取坐标点
initLineChart();//初始化
}
/**
* 初始化LineChart的一些设置
*/
private void initLineChart(){
Line line = new Line(mPointValues).setColor(Color.parseColor("#FFCD41")); //折线的颜色
List<Line> lines = new ArrayList<Line>();
line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状
// 这里是圆形 （有三种 ：ValueShape.SQUARE ValueShape.CIRCLE ValueShape.SQUARE）
line.setCubic(false);//曲线是否平滑
// line.setStrokeWidth(3);//线条的粗细，默认是3
line.setFilled(false);//是否填充曲线的面积
line.setHasLabels(true);//曲线的数据坐标是否加上备注
// line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据
// （设置了这个line.setHasLabels(true);就无效）
line.setHasLines(true);//是否用直线显示。如果为false 则没有曲线只有点显示
line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示
lines.add(line);
LineChartData data = new LineChartData();
data.setLines(lines);
//坐标轴
Axis axisX = new Axis(); //X轴
axisX.setHasTiltedLabels(true); //X轴下面坐标轴字体是斜的显示还是直的，true是斜的显示
// axisX.setTextColor(Color.WHITE); //设置字体颜色
axisX.setTextColor(Color.parseColor("#363636"));//黑色
axisX.setName("未来几天的天气"); //表格名称
axisX.setTextSize(16);//设置字体大小
axisX.setMaxLabelChars(7); //最多几个X轴坐标，
// 意思就是你的缩放让X轴上数据的个数7<=x<=mAxisValues.length
axisX.setValues(mAxisXValues); //填充X轴的坐标名称
data.setAxisXBottom(axisX); //x 轴在底部
// data.setAxisXTop(axisX); //x 轴在顶部
axisX.setHasLines(false); //x 轴分割线
Axis axisY = new Axis(); //Y轴
axisY.setName("新的设置");//y轴标注
axisY.setTextColor(Color.parseColor("#363636"));//黑色
axisY.setTextSize(11);//设置字体大小
data.setAxisYLeft(axisY); //Y轴设置在左边
//data.setAxisYRight(axisY); //y轴设置在右边
//设置行为属性，支持缩放、滑动以及平移
lineChart.setInteractive(true);
lineChart.setZoomType(ZoomType.HORIZONTAL); //缩放类型，水平
lineChart.setMaxZoom((float) 3);//缩放比例
lineChart.setLineChartData(data);
lineChart.setVisibility(View.VISIBLE);
/**注：下面的7，10只是代表一个数字去类比而已
* 见（http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2）;
* 下面几句可以设置X轴数据的显示个数（x轴0-7个数据），当数据点个数小于（29）的时候，缩小到极致hellochart默认的是所有显示。当数据点个数大于（29）的时候，
* 若不设置axisX.setMaxLabelChars(int count)这句话,则会自动适配X轴所能显示的尽量合适的数据个数。
* 若设置axisX.setMaxLabelChars(int count)这句话,
* 33个数据点测试，若 axisX.setMaxLabelChars(10);里面的10大于v.right= 7; 里面的7，则
刚开始X轴显示7条数据，然后缩放的时候X轴的个数会保证大于7小于10
若小于v.right= 7;中的7,反正我感觉是这两句都好像失效了的样子 - -!
* 并且Y轴是根据数据的大小自动设置Y轴上限
* 若这儿不设置 v.right= 7; 这句话，则图表刚开始就会尽可能的显示所有数据，交互性太差
*/
Viewport v = new Viewport(lineChart.getMaximumViewport());
v.left = 0;
v.right= 7;
lineChart.setCurrentViewport(v);
}
/**
* X 轴的显示
*/
private void getAxisXLables(){
for (int i = 0; i < date.length; i++) {
mAxisXValues.add(new AxisValue(i).setLabel(date[i]));
}
}
/**
* 图表的每个点的显示
*/
private void getAxisPoints(){
for (int i = 0; i < score.length; i++) {
mPointValues.add(new PointValue(i, score[i]));
}
}
}
—-补充——
1.界面xml布局中：
<TextView
android:gravity="bottom"
android:id="@+id/tv_type"
android:textColor="@color/app_white"
android:textSize="22sp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
<TextView
android:layout_marginLeft="10dp"
android:id="@+id/tv_date"
android:textSize="14sp"
android:textColor="@color/app_white"
android:gravity="bottom"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<TextView
android:id="@+id/tv_result"
android:textColor="@color/app_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textStyle="bold"
android:gravity="bottom"
android:textSize="22sp"/> <lecho.lib.hellocharts.view.LineChartView
android:id="@+id/linechart"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent" />2.界面activity中：
折线图所示数据：
String[] yearsX = {"2013", "2014", "2015", "2016", "2017"};//X轴的标注:年份
int[] heightY= { 136, 142, 148, 153, 155};//图表的数据：身高linechart.setZoomEnabled(false);//设置是否可以缩放
linechart.setInteractive(true);//设置是否可以平移
//X轴
Axis axisX = new Axis().setHasLines(true);
axisX.setLineColor(getResources().getColor(R.color.app_white));
axisX.setTextColor(getResources().getColor(R.color.app_white));
ArrayList<AxisValue> axisValuesX = new ArrayList<AxisValue>();//定义X轴刻度值的数据集合
ArrayList<PointValue> pointValues = new ArrayList<>();
//循环为节点、X、Y轴添加数据
for (int j = 0; j < yearsX.length; j++) {
axisValuesX.add(new AxisValue(j).setValue(j).setLabel( yearsX[j]));// 添加X轴显示的刻度值
}
tvType.setText("身高");
linechart.setBackgroundColor(Color.parseColor("#f9c172"));
chartBar.setBackgroundColor(Color.parseColor("#f9c172"));
for (int i = 0; i < heightY.length; i++) {
pointValues.add(new PointValue(i, heightY[i]));
}
axisX.setValues(axisValuesX);
//线条
List<Line> lines = new ArrayList<Line>();//定义线的集合
Line line = new Line(pointValues);//将值设置给折线
line.setColor(getResources().getColor(R.color.app_white));// 设置折线颜色
line.setStrokeWidth(3);// 设置折线宽度
line.setFilled(false);// 设置折线覆盖区域是否填充
line.setCubic(true);// 是否设置为立体的
line.setPointColor(getResources().getColor(R.color.app_white));// 设置节点颜色
line.setPointRadius(5);// 设置节点半径
line.setHasLabels(true);// 是否显示节点数据
line.setHasLines(true);// 是否显示折线
line.setHasPoints(true);// 是否显示节点
line.setShape(ValueShape.CIRCLE);// 节点图形样式 DIAMOND菱形、SQUARE方形、CIRCLE圆形
// line.setHasLabelsOnlyForSelected(true);// 隐藏数据，触摸可以显示
lines.add(line);// 将数据集合添加线
LineChartData chartData = new LineChartData(lines);//将线的集合设置为折线图的数据
// chartData.setAxisYLeft(axisY);// 将Y轴属性设置到左边
chartData.setAxisXBottom(axisX);// 将X轴属性设置到底部
//chartData.setAxisYRight(axisYRight);//设置右边显示的轴
// chartData.setAxisXTop(axisXTop);//设置顶部显示的轴
chartData.setBaseValue(20);// 设置反向覆盖区域颜色
chartData.setValueLabelBackgroundAuto(true);// 设置数据背景是否跟随节点颜色
chartData.setValueLabelBackgroundColor(getResources().getColor(R.color.app_polygon));// 设置数据背景颜色
chartData.setValueLabelBackgroundEnabled(true);// 设置是否有数据背景
chartData.setValueLabelsTextColor(getResources().getColor(R.color.app_gray));// 设置数据文字颜色
chartData.setValueLabelTextSize(12);// 设置数据文字大小
chartData.setValueLabelTypeface(Typeface.MONOSPACE);// 设置数据文字样式
// chart.setLineChartData(LineChartData data);//最后为图表设置数据，数据类型为LineChartDat
linechart.setLineChartData(chartData);
linechart.setOnValueTouchListener(FrChart.this);implements LineChartOnValueSelectListener
@Override
public void onValueSelected(int i, int i1, PointValue pointValue) {
tvDate.setText( String.valueOf( yearsX[i1] ) + "/03/11");
switch ( position){
case 2:
tvResult.setText( String.valueOf( heightY[i1] ) + " cm");
break;
case 3:
tvResult.setText( String.valueOf( eyesightY[i1] ) );
break;
case 4:
tvResult.setText( String.valueOf( weightY[i1] ) + " kg");
break;
}
}
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
