开发过程中实现折线图的方法

一开始为了期末作业做了一个计步器，可以连接手机的传感器，简单实现计步功能。 但我发现页面太单调，所以我考虑添加每日步数趋势图，因为通过对应日期，就可以计算出步数。 以折线的方式更直观的向用户展示数字的变化。

我也参考了很多现有计步器的设计风格。 我个人认为一个简单又漂亮的页面确实能让大家感觉舒服。

这是两个计步器的历史页面小程序开发实战案例之折线图制作，一个是峰值图，一个是线型。

我在做图表部分的时候，在实现过程中也遇到了很多问题。 我在互联网上寻找了很多解决方案。 我在这里简单记录一下相关的一些问题。

首先简单了解了开发中实现折线图的方法，比如XCL-、XCL-等。在做出具体决定之前，我去网上查找了很多相关资料并了解每种方法的直接优缺点。

首先说一下，它也是一款非常不错的图表工具，可以支持多种类型的图表显示，还可以缩放图表，支持动画效果等。不过也有人说性能一般，因为会卡顿或者冻结使用视图时。 不流畅，很容易让开发者头疼；

其次，XCL定制的图表也不错，但实际上更适合固定图表。 如果需要满足滑动界面操作，则很难解释； 而且，首先接口不是很好，然后适应性不强，不能满足开发的需要。 用户的需求。

最后说一下我们今天的目标：据说非常适合初学者开发者使用。 它简单快速、易于引入、界面美观。 尤其是自己使用后，能感觉到代码比较清晰，操作相应的滑动或者缩放也非常流畅。 支持饼图、折线图、条形图、气泡类型……基本上可以说是“只要你想要的，只要我有”。

进口

这部分就简单提一下，因为网上已经有很多相关的介绍了：app–>–>，写在闭包中

dependencies{ compile 'com.github.lecho:hellocharts-library:1.5.8@aar' }

还有一些其他方法。 我建议你在“简书”或“知乎”上寻找它们。

折线图布局部分：

折线图的布局非常简单：

<lecho.lib.hellocharts.view.LineChartView android:id="@+id/line_chart" android:padding="25dp" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff"/> <ListView android:visibility="gone" android:divider="@null" android:scrollbars="none" android:layout_marginTop="15dp" android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent">ListView> LinearLayout>

折线图部分对应java代码

public class ListActivity extends Activity { private ListView listview; private List stepEntityList = new ArrayList<>(); private StepDataDao stepDataDao; private LineChartView lineChart; private List list; String[] date ; float [] score; private List mPointValues = new ArrayList(); private List mAxisXValues = new ArrayList(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list); stepDataDao = new StepDataDao(this); initView(); list = stepDataDao.getAllDatas( ); date=new String[list.size()]; score=new float[list.size()]; for (int i=0;iprivate void initLineChart(){ Line line = new Line(mPointValues).setColor(Color.parseColor("#FFCD41")); List lines = new ArrayList(); line.setShape(ValueShape.CIRCLE); //折线图上每个数据点的形状，这里是圆形 line.setCubic(false); line.setFilled(false); line.setHasLabels(true); line.setHasLines(true); line.setHasPoints(true); lines.add(line); LineChartData data = new LineChartData(); data.setLines(lines); //坐标轴 Axis axisX = new Axis(); axisX.setHasTiltedLabels(true); axisX.setTextColor(Color.parseColor("#D6D6D9"));//设置字体颜色 axisX.setTextSize(8);//设置字体大小 axisX.setMaxLabelChars(8);//最多几个X轴坐标 axisX.setValues(mAxisXValues); data.setAxisXBottom(axisX); axisX.setHasLines(true); Axis axisY = new Axis(); axisY.setName(""); axisY.setTextSize(8); data.setAxisYLeft(axisY); //设置行为属性，缩放、滑动、平移 lineChart.setInteractive(true); lineChart.setZoomType(ZoomType.HORIZONTAL); lineChart.setMaxZoom((float) 3); lineChart.setLineChartData(data); lineChart.setVisibility(View.VISIBLE); //设置X轴数据的显示个数（x轴0-7个数据） Viewport v = new Viewport(lineChart.getMaximumViewport()); v.left = 0; v.right= 7; lineChart.setCurrentViewport(v); } private void initView() { listview=(ListView) findViewById(R.id.listview); lineChart = (LineChartView)findViewById(R.id.line_chart); } private void getAxisXLables(){ for (int i = 0; i < date.length; i++) { mAxisXValues.add(new AxisValue(i).setLabel(date[i])); } } private void getAxisPoints(){ for (int i = 0; i < score.length; i++) { mPointValues.add(new PointValue(i, score[i])); } } }

最终出现的折线图如下所示：