利用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<List<SubcolumnValue>> Xvalues = new ArrayList<List<SubcolumnValue>>();private static List<AxisValue> Lvalues;@Overrideprotected 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() {@Overridepublic void handleMessage(Message msg) {// 刷新图表updateChart();super.handleMessage(msg);}};task = new TimerTask() {@Overridepublic 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<Column> columns = new ArrayList<Column>();List<SubcolumnValue> values;if (Xvalues.size() > 0) {int size = Xvalues.size();for (int i = 0; i < size; i++) {values = new ArrayList<SubcolumnValue>();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<Column> columns = new ArrayList<Column>();List<SubcolumnValue> 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<SubcolumnValue>();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 {@Overridepublic void onValueSelected(int columnIndex, int subcolumnIndex, SubcolumnValue value) {// Toast.makeText(getActivity(), "Selected: " + value, Toast.LENGTH_SHORT).show();}@Overridepublic void onValueDeselected() {// TODO Auto-generated method stub}}@Overridepublic void onDestroy() {// 当结束程序时关掉Timertimer.cancel();super.onDestroy();}
}