本篇博客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);
设定分离间隔
mPieChartData.setSlicesSpacing(18);
单行文本内容
mPieChartData.setCenterText1("Hello"); //文本内容
毫无疑问这个是项目中花费了很多心力的地方,有太多的细节需要调整,网上的资料并不精细,废话不多说下面开始
@空心点的实现,框架的节点样式很少,而且没有空心原点,怎么办?(具体请参考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());
}
}
仔细看这个方法,这里判定了传入的节点样式,然后通过传入的样式判断应该绘制的效果
我们可以在实心圆的上面在绘制一个半径略小的白底实心圆,然后以白色充当整个背景,就营造出了空心圆的效果
Axis axisX = new Axis(); //X轴
Axis axisY = new Axis().setHasLines(true); //Y轴
ArrayList axisValuesX = new ArrayList();//定义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 axisValuesY = new ArrayList();//定义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