最近做室内定位需要绘出加速度传感器输出的三个方向的加速度曲线,找到了开源https://github.com/jjoe64/GraphView-Demos,省去了要重新学MatLab *=*。
在http://www.android-graphview.org/download--getting-started.html下载.jar包。
1、GraphView的使用和普通View的使用相同。在Layout中:
<com.jjoe64.graphview.GraphViewandroid:layout_width="match_parent"android:layout_height="200dip"android:id="@+id/graph" />
2、支持三种图表:Line和Bar、Point。
<span style="white-space:pre"> </span>GraphView graph = (GraphView) findViewById(R.id.graph);LineGraphSeries<DataPoint> series = new LineGraphSeries<DataPoint>(new DataPoint[] {new DataPoint(0, 1),new DataPoint(1, 5),new DataPoint(2, 3),new DataPoint(3, 2),new DataPoint(4, 6)});
<span style="white-space:pre"> </span>graph.addSeries(series);
GraphView graph = (GraphView) rootView.findViewById(R.id.graph);BarGraphSeries<DataPoint> series = new BarGraphSeries<DataPoint>(new DataPoint[] {new DataPoint(0, -2),new DataPoint(1, 5),new DataPoint(2, 3),new DataPoint(3, 2),new DataPoint(4, 6)});series.setSpacing(30);graph.addSeries(series);
<span style="white-space:pre"> </span>PointsGraphSeries<DataPoint> series3 = new PointsGraphSeries<DataPoint>(new DataPoint[] {new DataPoint(0, 0),new DataPoint(1, 3),new DataPoint(2, 1),new DataPoint(3, 0),new DataPoint(4, 4)});graph.addSeries(series3);series3.setShape(PointsGraphSeries.Shape.TRIANGLE);//设置点的形状series3.setColor(Color.YELLOW);
也可以在XML中使用,但通过.jar包的不支持此功能。
<com.jjoe64.graphview.helper.GraphViewXMLandroid:layout_width="match_parent"android:layout_height="100dip"app:seriesData="0=5;2=5;3=0;4=2"app:seriesType="line"app:seriesColor="#ee0000" />
3、设置各种属性
设置每条曲线的标注:
<span style="white-space:pre"> </span>graph.getLegendRenderer().setVisible(true);graph.getLegendRenderer().setAlign(LegendRenderer.LegendAlign.TOP);//右上角对每条线注释graph.getLegendRenderer().setTextColor(Color.WHITE);//标注字的颜色series.setTitle("foo");series1.setTitle("bar");
设置轴的数据显示格式:
<span style="white-space:pre"> </span>//设置轴分割数字格式NumberFormat nf = NumberFormat.getInstance();nf.setMinimumFractionDigits(1);//小数位数nf.setMinimumIntegerDigits(2);//整数部分位数graph.getGridLabelRenderer().setLabelFormatter(new DefaultLabelFormatter(nf, nf));
自定义画笔:
<span style="white-space:pre"> </span>//自定义画笔Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(10);paint.setPathEffect(new DashPathEffect(new float[]{8, 5}, 0));series1.setCustomPaint(paint);
点击事件:
<span style="white-space:pre"> </span>//线条点击事件series.setOnDataPointTapListener(new OnDataPointTapListener() {@Overridepublic void onTap(Series series, DataPointInterface dataPoint) {Toast.makeText(MainActivity.this, "Series1: On Data Point clicked: "+dataPoint, Toast.LENGTH_SHORT).show();}});
设置表格(分割线)颜色:
graph.getGridLabelRenderer().setGridColor(Color.WHITE);//表格颜色
实例展示:
自定义轴标签:
graph.getGridLabelRenderer().setLabelFormatter(new DefaultLabelFormatter() {@Overridepublic String formatLabel(double value, boolean isValueX) {if (isValueX) {// show normal x valuesreturn super.formatLabel(value, isValueX);} else {// show currency for y valuesreturn super.formatLabel(value, isValueX) + "*";}}});
X轴设置为时间:
// generate DatesCalendar calendar = Calendar.getInstance();Date d1 = calendar.getTime();calendar.add(Calendar.DATE, 1);Date d2 = calendar.getTime();calendar.add(Calendar.DATE, 1);Date d3 = calendar.getTime();GraphView graph = (GraphView) rootView.findViewById(R.id.graph);// you can directly pass Date objects to DataPoint-Constructor// this will convert the Date to double via Date#getTime()LineGraphSeries<DataPoint> series = new LineGraphSeries<DataPoint>(new DataPoint[] {new DataPoint(d1, 1),new DataPoint(d2, 5),new DataPoint(d3, 3)});graph.addSeries(series);// set date label formattergraph.getGridLabelRenderer().setLabelFormatter(new DateAsXAxisLabelFormatter(getActivity()));graph.getGridLabelRenderer().setNumHorizontalLabels(3); // only 4 because of the space// set manual x bounds to have nice stepsgraph.getViewport().setMinX(d1.getTime());graph.getViewport().setMaxX(d3.getTime());graph.getViewport().setXAxisBoundsManual(true);// as we use dates as labels, the human rounding to nice readable numbers// is not nessecarygraph.getGridLabelRenderer().setHumanRounding(false);
设置X、Y轴 Bounds:
// set manual X boundsgraph.getViewport().setXAxisBoundsManual(true);graph.getViewport().setMinX(0.5);graph.getViewport().setMaxX(3.5);// set manual Y boundsgraph.getViewport().setYAxisBoundsManual(true);graph.getViewport().setMinY(3.5);graph.getViewport().setMaxY(8);
设置图表可以缩放:
// enable scalinggraph.getViewport().setScalable(true);
设置Y轴可以Auto,图表可以横向滑动:
// enable scrollinggraph.getViewport().setScrollable(true);
这只左右两个Y轴:
// set second scalegraph.getSecondScale().addSeries(series2);// the y bounds are always manual for second scalegraph.getSecondScale().setMinY(0);graph.getSecondScale().setMaxY(100);series2.setColor(Color.RED);graph.getGridLabelRenderer().setVerticalLabelsSecondScaleColor(Color.RED);// legendseries.setTitle("foo");series2.setTitle("bar");graph.getLegendRenderer().setVisible(true);graph.getLegendRenderer().setAlign(LegendRenderer.LegendAlign.TOP);graph.getViewport().setBackgroundColor(Color.GRAY);
使用 staticLables:
// use static labels for horizontal and vertical labelsStaticLabelsFormatter staticLabelsFormatter = new StaticLabelsFormatter(graph);staticLabelsFormatter.setHorizontalLabels(new String[] {"old", "middle", "new"});staticLabelsFormatter.setVerticalLabels(new String[] {"low", "middle", "high"});graph.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter);
设置轴Lables:
// titlesgraph.setTitle("Chart Title");graph.getGridLabelRenderer().setVerticalAxisTitle("Vertical Axis");graph.getGridLabelRenderer().setHorizontalAxisTitle("Horizontal Axis");
标签、背景色、字体、字大小、颜色....Styling:
// styling grid/labelsgraph.getGridLabelRenderer().setGridColor(Color.RED);graph.getGridLabelRenderer().setHighlightZeroLines(false);graph.getGridLabelRenderer().setHorizontalLabelsColor(Color.GREEN);//水平轴字体颜色graph.getGridLabelRenderer().setVerticalLabelsColor(Color.RED);//垂直轴字颜色graph.getGridLabelRenderer().setVerticalLabelsAlign(Paint.Align.LEFT);graph.getGridLabelRenderer().setLabelVerticalWidth(150);graph.getGridLabelRenderer().setTextSize(40);//字大小graph.getGridLabelRenderer().setGridStyle(GridLabelRenderer.GridStyle.HORIZONTAL);//表格样式,水平线graph.getGridLabelRenderer().reloadStyles();graph.getGridLabelRenderer().setHorizontalLabelsAngle(120);//水平轴标签倾斜角// styling viewportgraph.getViewport().setBackgroundColor(Color.argb(255, 222, 222, 222));//图表背景色graph.getViewport().setDrawBorder(true);graph.getViewport().setBorderColor(Color.BLUE);// styling seriesseries.setTitle("Random Curve 1");series.setColor(Color.GREEN);series.setDrawDataPoints(true);series.setDataPointsRadius(10);series.setThickness(8);series2.setTitle("Random Curve 2");series2.setDrawBackground(true);series2.setBackgroundColor(Color.argb(100, 255, 255, 0));Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(10);paint.setPathEffect(new DashPathEffect(new float[]{8, 5}, 0));series2.setCustomPaint(paint);// styling legend 注释每条线代表什么graph.getLegendRenderer().setVisible(true);graph.getLegendRenderer().setTextSize(25);graph.getLegendRenderer().setBackgroundColor(Color.argb(150, 50, 0, 0));graph.getLegendRenderer().setTextColor(Color.WHITE);//graph.getLegendRenderer().setAlign(LegendRenderer.LegendAlign.TOP);//graph.getLegendRenderer().setMargin(30);graph.getLegendRenderer().setFixedPosition(150, 0);