hellocharts-android图表库使用详解

本篇博客Demo： http://download.csdn.net/download/g_ying_jie/10135594

感谢XiaRui's的汉化翻译和注解：http://www.iamxiarui.com/2016/09/08/android：一起学会超好用图表控件-hellocharts/?utm_source=tuicool&utm_medium=referral

第一步、gradle集成

compile 'com.github.lecho:hellocharts-library:1.5.8@aar'

@左对齐的横向柱状图

实现方式：不可滑动自适应高度的ListView，动态设置左对齐距离的适配器，具体用法可参考demo的app模块

//查询最长的城市名字段，传递给适配器设定间距
        TextView cityTv = (TextView) LayoutInflater.from(this).inflate(R.layout.item_line_char, null).findViewById(R.id.city_name);
        String longestStr = "";
        for (int i = 0; i < list.size(); i++) {
            if (list.get(i).getCityName().length() > longestStr.length()) {
                longestStr = list.get(i).getCityName();
            }
        }
        TextPaint textPaint = cityTv.getPaint();
        int cityTvWidth = (int) textPaint.measureText(longestStr);

        LineCharAdapter adapter = new LineCharAdapter(list, this, screenwidth, cityTvWidth);

//动态设定宽度
 LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) xLength.getLayoutParams();
        params.width = (screenWidth - cityName.getWidth() - 1 - percent.getWidth()) / 100 * list.get(position).getxLength();
        xLength.setLayoutParams(params);

@饼状图，更多用法参照HelloChartsDemo模块的PieChartActivity

设定分离间隔

 mPieChartData.setSlicesSpacing(18);    

单行文本内容

mPieChartData.setCenterText1("Hello");             //文本内容

@折线图，更多用法参照HelloChartsDemo模块的LineChartActivity，比较通用的属性我就不一一罗列了

毫无疑问这个是项目中花费了很多心力的地方，有太多的细节需要调整，网上的资料并不精细，废话不多说下面开始

@空心点的实现，框架的节点样式很少，而且没有空心原点，怎么办？（具体请参考MyLineChartRenderer，这里只讲解实现原理）

private ValueShape pointsShape = ValueShape.CIRCLE; //点的形状(圆/方/菱形)

关注留心源码会发现如下方法，CharRenderer就是负责具体的线和节点绘制的

mLineChartView.setChartRenderer(new MyLineChartRenderer(this, mLineChartView, mLineChartView));

找到了根源现在我们就会想怎么去复写自己的CharRenderer替换掉框架自带的绘制效果

private Paint pointPaint = new Paint();

看到这行代码我们就明白这个画笔是用来绘制节点的，那么我们能不能模仿这个画笔绘制出我们想要的节点呢

private Paint pointStrokePaint = new Paint();

好我们也新建一个画笔，代码往下走，接着模仿pointPaint的属性设置

        pointPaint.setAntiAlias(true);
        pointPaint.setStyle(Paint.Style.FILL);

        pointStrokePaint.setAntiAlias(true);
        pointStrokePaint.setColor(Color.WHITE);
        pointStrokePaint.setStyle(Paint.Style.FILL);

到此画笔建好了，属性也设置了，接下来看看pointPaint的具体实现

private void drawPoint(Canvas canvas, Line line, PointValue pointValue, float rawX, float rawY,
                           float pointRadius) {
        if (ValueShape.SQUARE.equals(line.getShape())) {
            canvas.drawRect(rawX - pointRadius, rawY - pointRadius, rawX + pointRadius, rawY + pointRadius,
                    pointPaint);
        } else if (ValueShape.CIRCLE.equals(line.getShape())) {
            canvas.drawCircle(rawX, rawY, pointRadius, pointPaint);
            canvas.drawCircle(rawX, rawY, pointRadius - 3, pointStrokePaint);//加入空心坐标描边
        } else if (ValueShape.DIAMOND.equals(line.getShape())) {
            canvas.save();
            canvas.rotate(45, rawX, rawY);
            canvas.drawRect(rawX - pointRadius, rawY - pointRadius, rawX + pointRadius, rawY + pointRadius,
                    pointPaint);
            canvas.restore();
        } else {
            throw new IllegalArgumentException("Invalid point shape: " + line.getShape());
        }
    }

仔细看这个方法，这里判定了传入的节点样式，然后通过传入的样式判断应该绘制的效果

我们可以在实心圆的上面在绘制一个半径略小的白底实心圆，然后以白色充当整个背景，就营造出了空心圆的效果

@X、Y坐标轴刻度值赋值

	    Axis axisX = new Axis();                    //X轴
            Axis axisY = new Axis().setHasLines(true);  //Y轴

            ArrayList<AxisValue> axisValuesX = new ArrayList<AxisValue>();//定义X轴刻度值的数据集合
            for (int i = 0; i < 12; i++) {
                String str;
                if (i * 2 < 10)
                    str = "0" + i * 2 + ":00";
                else
                    str = i * 2 + ":00";
                axisValuesX.add(new AxisValue(i).setValue(i * 2).setLabel(str));
            }
            axisX.setValues(axisValuesX);//为X轴显示的刻度值设置数据集合
            ArrayList<AxisValue> axisValuesY = new ArrayList<AxisValue>();//定义Y轴刻度值的数据集合
            for (int i = 0; i < 8; i++) {
                axisValuesY.add(new AxisValue(i).setValue((float) (i * 2.5)).setLabel(i * 2.5 + "K"));
            }
            axisY.setValues(axisValuesY);

            axisX.setTextColor(Color.GRAY);             //X轴灰色
            axisX.setTextSize(8);
            axisY.setTextColor(Color.GRAY);             //Y轴灰色
            axisY.setTextSize(8);
            axisX.setHasLines(true);// 是否显示X轴网格线
            axisY.setHasLines(true);// 是否显示Y轴网格线

            //setLineColor()：此方法是设置图表的网格线颜色 并不是轴本身颜色
            mLineData.setAxisXBottom(axisX);            //设置X轴位置 下方
            mLineData.setAxisYLeft(axisY);              //设置Y轴位置 左边

其他属性和详细用法参考demo


剩下的一些图表控件用法有时间研究再来分享，有问题欢迎留言交流