先看一个例子：
test.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<lecho.lib.hellocharts.view.ColumnChartView
android:id="@+id/test_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>Test.java:
package com.example.administrator.chart.test;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import com.example.administrator.chart.R;
import java.util.ArrayList;
import java.util.List;
import lecho.lib.hellocharts.model.Column;
import lecho.lib.hellocharts.model.ColumnChartData;
import lecho.lib.hellocharts.model.SubcolumnValue;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.ColumnChartView;
/**
* Created by Administrator on 2017/3/28.
*/
public class Test extends AppCompatActivity{
ColumnChartView columnChartView=null;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
columnChartView=(ColumnChartView) findViewById(R.id.test_content);
generateDefaultData();
}
private void generateDefaultData(){
//定义有多少个柱子
int numColumns = 8;
//定义表格实现类
ColumnChartData columnChartData;
//Column 是下图中柱子的实现类
List<Column> columns =new ArrayList<>();
//SubcolumnValue 是下图中柱子中的小柱子的实现类，下面会解释我说的是什么
List<SubcolumnValue> values=new ArrayList<>();
//循环初始化每根柱子，
for(int i=0;i<numColumns;i++){
//每一根柱子中只有一根小柱子
values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
//初始化Column
Column column = new Column(values);
columns.add(column);
}
//给表格添加写好数据的柱子
columnChartData = new ColumnChartData(columns);
//给画表格的View添加要画的表格
columnChartView.setColumnChartData(columnChartData);
}
}
上面完成了基本的柱状图（只有不同颜色的柱子），显然这种图表没用途，但是很简单。在讲解上面代码什么意思之前我们聊一聊HelloChart是怎么设计的。
当我们通过HelloChart话柱状图时，我们需要两个东西。一个放表格的地方ColumnChartView，一个真正的表示表格的类ColumnChartData。
ColumnChartView
通过他的名字我们一下就知道他是干什么的，他就是显示柱状图的View。这个类因为是一个View所以他的父类AbstractChartView中重写很多View的函数，同时定义了一大图表绘制的方法，比如缩放的函数就在其中（所以我们不用谢缩放了）。这些方法会根据我们设置的图表来绘制到ColumnChartView所以我就不多赘述了，感兴趣的可以看看源码。
关键方法
setOnValueTouchListener添加点击数据时的监听，这是这个类的灵魂。后面详细说
getxxx 返回我们真正的表格类ColumnChartData
setColumnChartData 添加真正的表格ColumnChartData，来把它画出来。
ColumnChartData
这个类就是我们的主角了，他就是我们的真正的表格了，而ColumnChartView只是充当画师的作用，来画出ColumnChartData。现在我们可以来说一说上面的代码了。
Column，SubcolumnValue
上面注释的解释，对于这个类可能有点蒙，现在我们修改上面的for循环来看看，这个东西到底是干什么的。修改成下面这一样
for(int i=0;i<numColumns;i++){
//每一根柱子中只有一根小柱子
values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
//初始化Column
Column column = new Column(values);
columns.add(column);
}
现在我们会发现 在每一个分隔之间是有连根柱子拼在一起的。我们可以这样理解。
Column表示一个大柱子，有多个柱子组成，每一个大柱子都是分割开的，而
SubcolumnValue就是组成大柱子的小柱子，这些小柱子拼在一起。其中
Column的构造函数接受存储SubcolumnValue的list数值。且
columnChartData 的构造函数接受存储Column的l**list**数值。
这张图标好像有很多问题，比如我根本不知道这些图表横纵表示什么，现在我们就来填补这些遐思
Axis
这个类就是我们想写的横纵轴的实现类了。在上面的代码中我们加入下面代码。
columnChartData = new ColumnChartData(columns);
Axis axisBootom = new Axis();
Axis axisLeft = new Axis();
axisBootom.setName("axis Bootom");
axisLeft.setName("axis Left");
columnChartData.setAxisXBottom(axisBootom);
columnChartData.setAxisYLeft(axisLeft);
columnChartView.setColumnChartData(columnChartData);
可以发现我们只是添加了相应的Name，但是框架自动生产了对应的数字.但是我们一般底部轴都显示成有用信息，所以我们还要修改一下
columnChartData = new ColumnChartData(columns);
Axis axisBootom = new Axis();
Axis axisLeft = new Axis();
List<AxisValue> axisValuess=new ArrayList<>();
for(int i=0;i<numColumns;i++){
axisValuess.add(new AxisValue(i).setLabel("lable"+i));
}
axisBootom.setValues(axisValuess);
axisBootom.setName("axis Bootom");
axisLeft.setName("axis Left");
columnChartData.setAxisXBottom(axisBootom);
columnChartData.setAxisYLeft(axisLeft);
columnChartView.setColumnChartData(columnChartData);
和之前的说的设计很相似，Axis类表示轴，而其中的每个数据信息会用存储AxisValue类的list表示。接着看上面的图，你会发现好像还是不怎么好看数据。接下来我们接着来完善我们的表格。向上面的代码加入下面代码
int numColumns = 8;
ColumnChartData columnChartData;
List<Column> columns =new ArrayList<>();
List<SubcolumnValue> values;
for(int i=0;i<numColumns;i++){
values=new ArrayList<>();
values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
Column column = new Column(values);
//给每一个柱子表上值
column.setHasLabels(true);
columns.add(column);
}
columnChartData = new ColumnChartData(columns);
Axis axisBootom = new Axis();
Axis axisLeft = new Axis();
List<AxisValue> axisValuess=new ArrayList<>();
for(int i=0;i<numColumns;i++){
axisValuess.add(new AxisValue(i).setLabel("lable"+i));
}
axisBootom.setValues(axisValuess);
axisBootom.setName("axis Bootom");
axisLeft.setName("axis Left");
//加入横线
axisBootom.setHasLines(true);
axisLeft.setHasLines(true);
columnChartData.setAxisXBottom(axisBootom);
columnChartData.setAxisYLeft(axisLeft);
columnChartView.setColumnChartData(columnChartData);
这样感觉很不错，但是好像有点乱怎么办，我们在添加点东西
....
column.setHasLabels(true);
//添加的地方，选中时出现label
column.setHasLabelsOnlyForSelected(true);
columns.add(column);
....
columnChartData.setAxisYLeft(axisLeft);
//添加的地方，选中时变粗。通常情况下点击变粗会立马缩回去，现在回变粗停住停住
columnChartView.setValueSelectionEnabled(true);
columnChartView.setColumnChartData(columnChartData);
现在好像ok了，是的。正常的图表做成这样已经ok了。但是还有东西要说
先说一说特效吧，hellochart封装了一些特效，方便不懂android 特效的人，也可以方便使用，具体实现是通过android 3.0引入的属性特效来实现。感兴趣的朋友可以去看看源码。现在我们来看看 hellochart是怎么是实现特效的
首先hellochart为我们提供了一些特效，现在我们来看看柱状图的，AbstractChartView类中我们可以使用的动画
protected ChartDataAnimator dataAnimator;
protected ChartViewportAnimator viewportAnimator;这两个动画会更具版本android 版本自动根据相应的兼容版本的动画，这个就是我们柱状图可以使用的两个动画了。怎么使用呢。
ChartDataAnimator
- 调用SubcolumnValue的setTarget为动画设置初始值
- 调用ColumnChartView的startDataAnimation方法。启动动画
是不是很简单
.......
for(int i=0;i<numColumns;i++){
values=new ArrayList<>();
//初始化数据值，同时也初始化动画值
values.add(new SubcolumnValue((float) Math.random() * 50f + 5,
ChartUtils.pickColor()).setTarget((float) Math.random() * 100));
values.add(new SubcolumnValue((float) Math.random() * 50f + 5,
ChartUtils.pickColor()).setTarget((float) Math.random() * 100));
Column column = new Column(values);
.....
columnChartView.setColumnChartData(columnChartData);
//启动动画
columnChartView.startDataAnimation(2000);因为gif太大了。占时没有找到压缩软件，所以先放了，希望有好的gif制作软件留言给我
对于另一种动画我们会在别的图形中说明它，现在不提了
ColumnChartData的不同样式
我们之前说过ColumnChartData就是我们的柱状图，而我们之前的例子都是默认的柱状图类型。其实他还有下面几种
stacked
data.setStacked(true);效果如下
每一个Column 中的SubcolumnValue就会竖着吗在一起了
Negative
当有的数据是负的时候就会出现这些Negative效果，这个效果只要我们在为SubcolumnValue设置值是使用负的就ok。
.....
int[] sign = new int[]{-1, 1};
sign[Math.round((float) Math.random())];
values.add(new SubcolumnValue((float) Math.random() * 20f * sign + 5 * sign, ChartUtils.pickColor()));
....加入这些这句代码之后我们的图标就会把相应的Column变成倒立的
