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

总结

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

具体代码请点击前往