hello chart——柱状图

- 日理万妓 2022-06-18 02:29 265阅读 0赞

先看一个例子：  
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);
    
        }
    }

![这里写图片描述][SouthEast]  
上面完成了基本的柱状图（只有不同颜色的柱子），显然这种图表没用途，但是很简单。在讲解上面代码什么意思之前我们聊一聊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);
    
            }

![这里写图片描述][SouthEast 1]  
现在我们会发现 在每一个分隔之间是有连根柱子拼在一起的。我们可以这样理解。  
**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);

![这里写图片描述][SouthEast 2]

可以发现我们只是添加了相应的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);

![这里写图片描述][SouthEast 3]

和之前的说的设计很相似，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);

![这里写图片描述][SouthEast 4]

这样感觉很不错，但是好像有点乱怎么办，我们在添加点东西

....
                column.setHasLabels(true);
                //添加的地方，选中时出现label
                column.setHasLabelsOnlyForSelected(true);
                columns.add(column);
      ....
            columnChartData.setAxisYLeft(axisLeft);
            //添加的地方，选中时变粗。通常情况下点击变粗会立马缩回去，现在回变粗停住停住
            columnChartView.setValueSelectionEnabled(true);
            columnChartView.setColumnChartData(columnChartData);

![这里写图片描述][SouthEast 5]

现在好像ok了，是的。正常的图表做成这样已经ok了。但是还有东西要说

先说一说特效吧，hellochart封装了一些特效，方便不懂android 特效的人，也可以方便使用，具体实现是通过android 3.0引入的属性特效来实现。感兴趣的朋友可以去看看源码。现在我们来看看 hellochart是怎么是实现特效的

首先hellochart为我们提供了一些特效，现在我们来看看柱状图的，**AbstractChartView**类中我们可以使用的动画

protected ChartDataAnimator dataAnimator;
        protected ChartViewportAnimator viewportAnimator;

这两个动画会更具版本android 版本自动根据相应的兼容版本的动画，这个就是我们柱状图可以使用的两个动画了。怎么使用呢。

# ChartDataAnimator #

1.  调用**SubcolumnValue**的**setTarget**为动画设置初始值
2.  调用**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);

效果如下  
![这里写图片描述][SouthEast 6]

每一个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变成倒立的  
![这里写图片描述][SouthEast 7]  
![这里写图片描述][SouthEast 8]

[SouthEast]: /images/20220618/6fd5d56288d440f0a64d35410b247274.png
[SouthEast 1]: /images/20220618/65283928e85a45c3b1db31d24def23a5.png
[SouthEast 2]: /images/20220618/4410e365135640f4ad7a1ace486b51db.png
[SouthEast 3]: /images/20220618/dcdc1405dc4c490a91170502aff60ce6.png
[SouthEast 4]: /images/20220618/5c5715521e7e452799351eddff8c9bf8.png
[SouthEast 5]: /images/20220618/0d0d58c9e1bf430293ca8e0bf3b93335.png
[SouthEast 6]: /images/20220618/b47d7403a7784e8b8f6c9a410563ca17.png
[SouthEast 7]: /images/20220618/7dc0678ae33d4a3d8bd944799ee60d9c.png
[SouthEast 8]: /images/20220618/54503b85716c46a0a278564770316fce.png