s 近期的项目中涉及到了相关图标的绘制,选择了第三方的开源图标库—HelloCharts。由于项目需求需要动态绘制折线图,所以对该开源框架的折线图部分进行了相关的修改。实现了以下功能:1.动态绘制折线图 2. 可实现折线图的上的点有多种颜色 3. 静态绘制折线图表时,可以在折线的最后一个点上进行不一样的标注。
先展示一下效果吧:
1.动态绘制折线图:
2.可设置折线图上的点有多种颜色:
3.标注【这里是作者自己用代码硬写上去的,没有进行适配等】
下面开始简单的说一下改动的地方。
1.动态绘制折线图:
/**
* 这个是模拟实时获取数据的一个计时器,大家可以根据实际情况修改
*/
private void showChangeLineChart() {
timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
if(!isFinish){
//实时添加新的点
pointValueList.add(points.get(position));
float x = points.get(position).getX();
//根据新的点的集合画出新的线
Line line = new Line(pointValueList);
line.setColor(Color.DKGRAY);
line.setShape(ValueShape.CIRCLE);
line.setCubic(true);//曲线是否平滑,即是曲线还是折线
linesList.add(line);
lineChartData = initDatas(linesList);
lineChartView.setLineChartData(lineChartData);
//g根据点的横坐标世事变幻坐标的视图范围
Viewport port;
if(x > 50){
port = initViewPort(x-50,x);
}
else {
port = initViewPort(0,50);
}
lineChartView.setMaximumViewport(port);
lineChartView.setCurrentViewport(port);
position++;
if(position > points.size()-1){
isFinish = true;
}
}
}
},1000,1000);
}
2.设置折线图上的点有多种颜色:
//首先 修改hellocharts源代码的PointValue这个实体类添加属性pointColor
public PointValue(float x, float y, int pointColor) {
set(x,y);
this.pointColor = pointColor;
}
//在hellocharts源代码的renderer包下的 LineChartRenderer类的drawPoints方法中修改
private void drawPoints(Canvas canvas, Line line, int lineIndex, int mode) {
/*********************************************/
// pointPaint.setColor(line.getPointColor());
/*********************************************/
int valueIndex = 0;
for (PointValue pointValue : line.getValues()) {
/*********************************************/
if(pointValue.getPointColor() == 0){
pointPaint.setColor(line.getPointColor());
}else {
pointPaint.setColor(pointValue.getPointColor());
}
/*********************************************/
.....
}
//这样就可以调用PointValue新的构造函数,给点赋值别的颜色
3.标注:
//首先 修改hellocharts源代码的PointValue这个实体类添加属性isFinish , int score
public PointValue(float x, float y, int pointColor,boolean isFinish , int score) {
set(x,y);
this.pointColor = pointColor;
this.isFinish = isFinish;
this.score = score;
}
//在hellocharts源代码的renderer包下的 LineChartRenderer类的drawPoints方法中修改
if(pointValue.isFinish()){
//画线,参数一起始点的x轴位置,参数二起始点的y轴位置,参数三终点的x轴水平位置,参数四y轴垂直位置,最后一个参数为Paint 画刷对象。
// drawLine(float startX, float startY, float stopX, float stopY, Paintpaint);
float y = pointValue.getY();
int color;
color = Color.parseColor("#00ba84");
Paint paint = new Paint();
paint.setStrokeWidth(5);
paint.setColor(color);
canvas.drawLine(rawX, rawY - 10,rawX+20,rawY - 50,paint);
paint.setTextSize(40f);
canvas.drawText(pointValue.getScore()+"",rawX-2 ,rawY - 64,paint);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(rawX+20,rawY - 80,30,paint);
}
//这样就可以调用PointValue新的构造函数,实现标注
最后附上我的源码和Demo