HelloChart折线图的改写

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处，我就不一一列出来了，上图：

总结

至此，修改的内容已基本达到我所要的需求了。这只是修改源码的部分，如果想要更加灵活的设置何种属性，只需新增方法出去调用即可。

具体代码请点击前往