使用helloCharts做的图表,花了点时间请看重点
public class MainActivity extends AppCompatActivity{
private LineChartView chartView;
// 折线集合(add多个line就会显示多条线)
List<Line> chartlines = new ArrayList<Line>();
// 横坐标集合,可以设置标注名称,就是x轴的值集合,可以是0-100,也可以是10000-20000
List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();
// 点的集合,顾名思义一个point,就有他所对应的x y值,假如有个点的值是(5,100)x=5 y=100
List<PointValue> pointValues = new ArrayList<PointValue>();
// 折线,多条折线可以new多个线,要显示谁,就在line集合里add谁
Line chartline = new Line();
// 线上的数据,鸡肋但必须得用
LineChartData lineChartData = new LineChartData();
// 定义格式,小数点等等信息
LineChartValueFormatter chartValueFormatter = new SimpleLineChartValueFormatter(2);
// X轴、Y轴
Axis axisX = new Axis();
Axis axisY = new Axis();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chartView=(LineChartView)findViewById(R.id.chartView);
}
public void setKLine(int type,List<DateForLine> list){
// 清空数据,将不影响下一次点击按钮 传过来一个新的list的显示
chartlines.clear();
mAxisXValues.clear();
pointValues.clear();
/*
* 这个循环是循环为x轴(x底端轴线)增加值应该只能是float类型的,当然int可以
*/
for(int i=0;i<list.size();i++){
String time=list.get(i).getTime();
AxisValue axisValue=new AxisValue(i);
// 这句话就关键了,你可以随意设置这个位置显示的东西,string类型的随意来
axisValue.setLabel(subTimeSecond(time));
mAxisXValues.add(axisValue);
}
// x轴完事了,该布点了
for(int i=0;i<list.size();i++){
String time=list.get(i).getTime();
PointValue pointValue=new PointValue(i,Float.parseFloat(list.get(i).getValue())*100);
// 温度显示小数
chartline.setFormatter(chartValueFormatter);
pointValue.setLabel(list.get(i).getValue().substring(0,9));
// 把这个点添加到集合里去,等会显示用
pointValues.add(pointValue);
}
// 把点的集合放在线上,显示多条线 就用不同的line分别添加不同的values
chartline.setValues(pointValues);
// 线的颜色,粗细
chartline.setColor(Color.RED);
chartline.setStrokeWidth(2);
// 点的颜色
chartline.setPointColor(Color.RED);
// 形状,ValueShape提供了几个
chartline.setShape(ValueShape.CIRCLE);
// 线的透明度
// chartline.setAreaTransparency(0);
// 点的大小
chartline.setPointRadius(3);
// 点上的标注信息,刚才 pointValues里面每个点的标注
chartline.setCubic(true);
// 阴影面积
chartline.setFilled(false);
// 是否用线显示。如果为false 则没有曲线只有点显示
chartline.setHasLines(true);
// 是否用点显示。如果为false 则没有点
chartline.setHasPoints(true);
// 点的标注是否显示
chartline.setHasLabels(true);
// 线的粗细
chartline.setStrokeWidth(2);
// 显示几条线,就可以分别设置每一条线,然后add进来
chartlines.add(chartline);
// 线的集合放在chart数据中,
lineChartData.setLines(chartlines);
/* x轴上面的值,就是刚才mAxisXValues的值
5个参数分别是:
1-例如4*24+12 显示为4日12时
2-是否有x轴网格线
3-x轴信息标注颜色是黑色
4-x轴网格线白色
5-x轴信息标注字体12
6-x轴的大名
Y轴也是这么设置,当你想点击不同的按钮,显示不同的信息时可用type进行处理
*/
axisX.setValues(mAxisXValues).setHasLines(true).setTextColor(Color.parseColor("#B0B0B0")).setLineColor(Color.WHITE).setTextSize(12).setName("时间");;
axisY.setHasLines(true).setTextColor(Color.parseColor("#B0B0B0")).setLineColor(Color.WHITE);//Color.parseColor("#B0B0B0")
axisY.setName("湿度");
// X轴上的标注数量,点少的时候可以这么用,点多的时候,就不建议这么用了
axisX.setMaxLabelChars(4);
// x 轴在底部
lineChartData.setAxisXBottom(axisX);
// x 轴在顶部
// lineChartData.setAxisXTop(axisX);
// y 轴在左,也可以右边
lineChartData.setAxisYLeft(axisY);
// 这两句话设置折线上点的背景颜色,默认是有一个小方块,而且背景色和点的颜色一样
// 如果想要原来的效果可以不用这两句话,我的显示的是透明的
lineChartData.setValueLabelBackgroundColor(Color.TRANSPARENT);
lineChartData.setValueLabelBackgroundEnabled(false);
lineChartData.setValueLabelsTextColor(Color.parseColor("#2CB5E6"));
// 把数据放在chart里,设置完这句话其实就可以显示了
chartView.setLineChartData(lineChartData);
// 设置行为属性,支持缩放、滑动以及平移,设置他就可以自己设置动作了
chartView.setInteractive(true);
// 可放大
chartView.setZoomEnabled(true);
// 我这边设置横向滚动
chartView.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
// 设置视图窗口
final Viewport v = new Viewport(chartView.getMaximumViewport());
v.top=10;
v.bottom=0;
// Viewport port = chart.getMaximumViewport();
// port.height()=port.top-port.bottom;
// port.width() = port.right - port.left;备用其他,可忽略
chartView.setMaximumViewport(v);
v.left=0;
v.right =3;
chartView.setCurrentViewport(v);
}
List<DateForLine> list1=new ArrayList<>();
list1.add(new DateForLine("2017-11-05 12:36:19.387","3.9215021E-2"));
list1.add(new DateForLine("2017-11-05 12:36:18.183","3.7307672E-2"));
list1.add(new DateForLine("2017-11-05 12:36:16.963","3.5877161E-2"));
list1.add(new DateForLine("2017-11-05 12:36:16.743","4.2076044E-2"));
list1.add(new DateForLine("2017-11-05 12:36:15.540","4.3983392E-2"));
list1.add(new DateForLine("2017-11-05 12:36:15.323","3.8261347E-2"));
list1.add(new DateForLine("2017-11-05 12:36:15.120","3.7784509E-2"));
list1.add(new DateForLine("2017-11-05 12:36:14.900","3.6830835E-2"));
list1.add(new DateForLine("2017-11-05 12:36:14.697","3.9691858E-2"));
list1.add(new DateForLine("2017-11-05 12:36:14.477","3.3492975E-2"));
list1.add(new DateForLine("2017-11-05 12:36:14.277","3.8261347E-2"));
list1.add(new DateForLine("2017-11-05 12:36:14.057","3.9691858E-2"));
list1.add(new DateForLine("2017-11-05 12:36:13.853","4.0645532E-2"));
list1.add(new DateForLine("2017-11-05 12:36:13.637","3.5877161E-2"));
list1.add(new DateForLine("2017-11-05 12:36:13.447","4.1599207E-2"));
list1.add(new DateForLine("2017-11-05 12:36:13.227","3.7784509E-2"));
list1.add(new DateForLine("2017-11-05 12:32:50.027","4.3506559E-2"));
list1.add(new DateForLine("2017-11-05 12:32:48.793","4.5890741E-2"));
list1.add(new DateForLine("2017-11-05 12:32:48.607","4.1599207E-2"));
list1.add(new DateForLine("2017-11-05 12:32:47.403","3.9215021E-2"));
setKLine(2,list1);
break;
}
public String subTimeSecond(String time){
return time.substring(0,19);
}
}