利用Hellocharts绘制频谱瀑布图（雨图）

频谱瀑布图是众多频谱仪器上非常普遍的一种图，对于观察一段时间内信号的变化是非常突出的。因此在android上绘制2纬的瀑布图也是我们项目不可或缺的一部分。下面就一个小demo与大家分享。

  经过多次对比，以及查看API文档，最终选择了hellocharts作为所依赖的图库，这个图库一直在github上更新。首先我将瀑布图设想为一层层的带有颜色的小块块向上堆叠的效果，而小块块颜色是与频谱值一一对应，能够实现这种画图的毫无疑问是选择条形图，而且是stackedBar.

在hellocharts的源码实例中，有一个ColumnActivity,其中就有stacked的实现样例，我就是在这个基础上，实现条形图流动起来。话不多说，直接上代码上图吧

demo效果图：

实际设备达到效果，由于不知道如何将手机截图做成gif,，又不想录视频再转成gif，因此将之前从仪器上的的瀑布图录下来的gif作为最终效果，实际接入信号手机上的效果也差不多：

  某设备gif图：

手机接入信号：

代码：

package com.example.administrator.ddd;

import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;

import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.listener.ColumnChartOnValueSelectListener;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Column;
import lecho.lib.hellocharts.model.ColumnChartData;
import lecho.lib.hellocharts.model.SubcolumnValue;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.renderer.ColumnChartRenderer;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.Chart;
import lecho.lib.hellocharts.view.ColumnChartView;

public class ColumnChartActivity extends ActionBarActivity {
    private static final int DEFAULT_DATA = 0;
    private static final int SUBCOLUMNS_DATA = 1;
    private static final int STACKED_DATA = 2;
    private static final int NEGATIVE_SUBCOLUMNS_DATA = 3;
    private static final int NEGATIVE_STACKED_DATA = 4;

    private ColumnChartView chart;
    private ColumnChartData data;
    private boolean hasAxes = true;
    private boolean hasAxesNames = true;
    private boolean hasLabels = false;
    private boolean hasLabelForSelected = false;
    private int dataType = DEFAULT_DATA;

    private Timer timer = new Timer();
    private TimerTask task;
    private Handler handler;
//         ColumnChartRenderer ren=new ColumnChartRenderer();

    List> Xvalues = new ArrayList>();
    private static List Lvalues;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_column_chart);
        chart = (ColumnChartView) findViewById(R.id.chart);
        chart.setOnValueTouchListener(new ValueTouchListener());
        //填数据
        Random rand = new Random();
        for (int mm = 0; mm < 5; mm++) {
            for (int i = 1; i < 11; i++) {
                int[] data = new int[1024];
                for (int j = 0; j < 1024; j++) {
                    int dataY = rand.nextInt(70) - 150;
                    data[j] = dataY;
                }
                Constant.queue_sweep.offer(data);
                Log.d("abcd", Arrays.toString(data));
            }
        }
        generateStackedData();

        // 这里的Handler实例将配合下面的Timer实例，完成定时更新图表的功能
        handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                // 刷新图表
                updateChart();
                super.handleMessage(msg);
            }
        };

        task = new TimerTask() {
            @Override
            public void run() {
                Message message = new Message();
                message.what = 1;
                handler.sendMessage(message);
            }
        };

        timer.schedule(task, 1000, 1000);




    }

    private void updateChart() {
        int numSubcolumns = 30;
        int numColumns = 1024;
        if (!Constant.queue_sweep.isEmpty()) {
            int[] ints = Constant.queue_sweep.poll();
            List columns = new ArrayList();
            List values;

            if (Xvalues.size() > 0) {
                int size = Xvalues.size();
                for (int i = 0; i < size; i++) {
                    values = new ArrayList();
                    values = Xvalues.get(i);
                    for (int j = numSubcolumns - 1; j > 0; j--) {
                        values.set(j, values.get(j - 1));
                    }
                    // int color=ChartUtils.pickColor();
                    int color = colors[(ints[i] + 150) / 8];
                    values.set(0, new SubcolumnValue(1, color));

                    Column column = new Column(values);
                    columns.add(column);
                }

            }
            data = new ColumnChartData(columns);
            // Set stacked flag.
            data.setStacked(true);
            data.setFillRatio(1);
            // Axis axisX = Axis.generateAxisFromRange(70, 170, 1);
            Axis axisX = new Axis(Lvalues);
            Axis axisY = Axis.generateAxisFromRange(0, 30, 2);
            axisY.setLineColor(Color.GREEN);
            axisX.setHasLines(false);
            axisX.setHasSeparationLine(false);
            axisY.setHasSeparationLine(false);
            axisY.setHasLines(false);

            axisX.setName("Axis X");
            axisY.setName("Axis Y");
            data.setAxisXBottom(axisX);
            data.setAxisYLeft(axisY);

            chart.setColumnChartData(data);

        }

        //chart.invalidate();
    }

    /**
     * Generates columns with stacked subcolumns.
     */
    private void generateStackedData() {
        int numSubcolumns = 30;
        int numColumns = 1024;
        // Column can have many stacked subcolumns, here I use 4 stacke subcolumn in each of 4 columns.
        List columns = new ArrayList();
        List values;
        Lvalues = new ArrayList<>();
        if (!Constant.queue_sweep.isEmpty()) {
            int[] ints = Constant.queue_sweep.poll();
            for (int i = 0; i < numColumns; ++i) {
                values = new ArrayList();
                
                for (int j = 1; j < 2; ++j) {
                     int color = ChartUtils.pickColor();
                 
                    values.add(new SubcolumnValue(1, color));
                }
                for (int j = 2; j <= numSubcolumns; ++j) {
                    values.add(new SubcolumnValue(1, Color.WHITE));
                }

                Column column = new Column(values);
                //  column.setHasLabels(hasLabels);
                column.setHasLabelsOnlyForSelected(hasLabelForSelected);
                columns.add(column);

                Xvalues.add(values);
            }
        }

        data = new ColumnChartData(columns);

        // Set stacked flag.
        data.setStacked(true);
        data.setFillRatio(1);


        Axis axisX = new Axis(Lvalues);
        axisX.setHasSeparationLine(false);
        axisX.setHasLines(false);
        Axis axisY = Axis.generateAxisFromRange(0, 30, 1);
        axisY.setHasSeparationLine(false);
        axisY.setHasLines(false);
        axisY.setLineColor(Color.GREEN);


        axisX.setName("Axis X");
        axisY.setName("Axis Y");
        data.setAxisXBottom(axisX);
        data.setAxisYLeft(axisY);

        chart.setColumnChartData(data);

    }


    private class ValueTouchListener implements ColumnChartOnValueSelectListener {

        @Override
        public void onValueSelected(int columnIndex, int subcolumnIndex, SubcolumnValue value) {
            // Toast.makeText(getActivity(), "Selected: " + value, Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onValueDeselected() {
            // TODO Auto-generated method stub

        }

    }


    @Override
    public void onDestroy() {
        // 当结束程序时关掉Timer
        timer.cancel();
        super.onDestroy();
    }
}