HelloChart折线图的改写
因为在实际应用中,原来的HelloChart不能满足我的需求,比如自定义Y轴,修改间距,修改圆点类型颜色等等,所以需要修改一些源码来实现这些功能。原来的HelloChart介绍和集成就不多说了,请点击参考
现要达到如下效果:
修改圆点样式
在LineChartRenderer这个类中,找到pointPaint这个画笔,可以修改如下属性:
pointPaint.setAntiAlias(true);
pointPaint.setStyle(Paint.Style.STROKE);//stroke为空心,fill为实心
pointPaint.setStrokeWidth(2);//边框宽度
修改具体坐标样式
在AbstractChartRenderer这个类中,找到labelPaint和labelBackgroundPaint这两个画笔(labelPaint是数值的样式,labelBackgroundPaint是数值背景的样式),可以修改如下属性:
labelPaint.setAntiAlias(true);
labelPaint.setStyle(Paint.Style.FILL);
labelPaint.setTextAlign(Align.LEFT);
**************************************************************
labelPaint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
labelPaint.setColor(Color.rgb(105,150,225));
labelBackgroundPaint.setAntiAlias(true);
labelBackgroundPaint.setStyle(Paint.Style.STROKE);
labelBackgroundPaint.setStrokeWidth(2);
注:由于底下还有修改这些画笔的地方,所以要修改最后引用的地方,修改前面的会导致不起作用。
修改Y轴坐标
原Y轴是可以根据数值自动分区的,现要改成自定义Y轴,虽然上面那篇博客中有写到可以自定义Y轴,但是我试了下发现并没有效果,还会导致Y轴不显示。后来自己尝试改了下源码,发现能达到我的需求。主要要修改的地方有两个地方:
1.修改MainActivity
把原来的自动设置的替换成自定义的。
//Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)
//Axis axisY = new Axis(); //Y轴
//axisY.setName("");//y轴标注
//axisY.setTextSize(10);//设置字体大小
//axisY.setMaxLabelChars(20);
//data.setAxisYLeft(axisY); //Y轴设置在左边
Axis axisY = new Axis().setHasLines(true);
axisY.setMaxLabelChars(5);//max label length, for example 60
List<AxisValue> values = new ArrayList<>();
for(int i = 0; i < yzhou.length; i++){
AxisValue value = new AxisValue(yzhou[i]);
values.add(value);
}
axisY.setValues(values);
axisX.setHasLines(true);
data.setAxisYLeft(axisY);
2.修改ChartComputator
修改top和bottom两个数值,一个最高点一个最低点。
currentViewport.left = Math.max(maxViewport.left, left);
currentViewport.top = 10000;
currentViewport.right = Math.min(maxViewport.right, right);
currentViewport.bottom = 0;
//currentViewport.left = Math.max(maxViewport.left, left);
//currentViewport.top = Math.min(maxViewport.top, top);
//currentViewport.right = Math.min(maxViewport.right, right);
//currentViewport.bottom = Math.max(maxViewport.bottom, bottom);
整体坐标右移一部分
只需修改ChartComputator中如下方法(return时加上一个位移量)即可:
public float computeRawX(float valueX) {
final float pixelOffset = (valueX - currentViewport.left) * (contentRectMinusAllMargins.width() /currentViewport.width());
return contentRectMinusAllMargins.left + pixelOffset + 20;
}
修改后可能你会发现最后一个点显示不全;此时需新增一个方法computeRawX2为上述内容,原computeRawX保持不变
public float computeRawX(float valueX) {
final float pixelOffset = (valueX - currentViewport.left) * (contentRectMinusAllMargins.width() /currentViewport.width());
return contentRectMinusAllMargins.left + pixelOffset;
}
public float computeRawX2(float valueX) {
final float pixelOffset = (valueX - currentViewport.left) * (contentRectMinusAllMargins.width() /currentViewport.width());
return contentRectMinusAllMargins.left + pixelOffset + 20;
}
然后需将用到 computeRawX的地方都加一层判断,为第一个坐标时才需要右移一定距离(使用computeRawX2),其余坐标保持不变(仍旧使用computeRawX);例如:
if(valueIndex==0){
rawValue = computator.computeRawX2(value);
}else {
rawValue = computator.computeRawX(value);
}
需修改的地方共有7处,我就不一一列出来了,上图: