williamchart 以一款android 绘图的开源框架。因为种种原因接触到了，就写一篇博客，以防忘记时可以复习复习。

以我下到到的源码好像占时只能绘制直线图和柱状图。且因为它的设计模式是一样的，你了解了直线图，其他图的也都是大同小异。很好学习。

LineChart

我们先看看完成一个基本的直线图需要什么吧 xml

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.williamchart.MainActivity"> <com.db.chart.view.LineChartView android:id="@+id/linechart" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.constraint.ConstraintLayout>

java

public class MainActivity extends AppCompatActivity { private LineChartView mChart; private final String[] mLabels = {"Jan", "Fev", "Mar", "Apr", "Jun", "May", "Jul", "Aug", "Sep"}; private final float[][] mValues = {{3.5f, 4.7f, 4.3f, 8f, 6.5f, 9.9f, 7f, 8.3f, 7.0f}, {4.5f, 2.5f, 2.5f, 9f, 4.5f, 9.5f, 5f, 8.3f, 1.8f}}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //找到表格 mChart=(LineChartView)findViewById(R.id.linechart); //设置线 LineSet lineSet= new LineSet(mLabels,mValues[0]); mChart.addData(lineSet); //显示 mChart.show(); } }

xml中的com.db.chart.view.LineChartView标签就是LineChartView类的xml表示。LineChartView就是我们的直线类。这个类的父类是ChartView.这是所有表格类的父类。负责集中管理监听，测量。数据显示等等一些表格通用的设置。从上面我们可以看见显示一个基本的表格很简单（记住label和value要一一对应不然会报错的）。 好了。下面我们来研究以下怎么使这个直线图变好看吧。改变表格样式（坐标轴，动画等）的函数基本全部都在其父类ChartView中定义set函数。这里不一一介绍了。

addData 这个方法可以添加线（下面说）。他也有接受ArrayList参数的版本，这样我们就可以搞事情了。

LineSet

上面我们说到了折线图的表，现在来说一说线。线的实例化，就需要类LineSet了。这个类就代表了线。 public LineSet(@NonNull String[] labels, @NonNull float[] values) 这个构造函数可以很方便你添加数据点。如果你像添加单个点你可以用lineChart.addponit方法.更多的操作线的方法。你都可以自行参考该类中第一的函数。

Tooltip

这个是什么东西呢。 从名字看好像匪夷所思。这个其实就是我们数据点被点击之后该怎么表现。那么我们就来玩玩吧 xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:background="@drawable/rect_round_corners_bck"> <TextView android:id="@+id/value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:gravity="center" android:textSize="16sp" android:textColor="#ffffff" android:layout_marginRight="5dp" android:layout_marginEnd="5dp"> </TextView> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:layout_centerVertical="true" android:layout_toRightOf="@+id/value" android:layout_toEndOf="@+id/value" android:src="@drawable/ic_face"/> </RelativeLayout> …… //在mChart.show();之前添加下面代码 setDimensionstooltip=new Tooltip(this,R.layout.data,R.id.value); //这个代码会固定显示的大小，不然可能点击出现的图标大小不一样。Tools是作者写的一个小工具类，做标准化测量用的 tooltip.setDimensions((int) Tools.fromDpToPx(58), (int) Tools.fromDpToPx(25)); //很关键，把我们的tooltip装进表格中去。 mChart.setTooltips(tooltip) ……

然后看运行效果

Animation

可以看见我的这份源码中的Animation还是很简单的。如果打开源码的。其实你会发现作者的这个Animation只是是对官方的系统动画进行了二次封装。

//setEasing是添加插值器函数。 Animation anim = new Animation().setEasing(new BounceInterpolator());

当然作者写的Animation可能不是简单的封装，太还有很多更能有待大家发现和完善。例如它有一个功能就是在动画播放完了之后可以紧接着干另一件事情。 把上面代码替换成下面这样

Runnable chartAction = new Runnable() { @Override public void run() { //设置想要显示的tooltip，第一个参数显示在哪，第二个阐述显示谁 tooltip.prepare(mChart.getEntriesArea(0).get(3), mValues[0][3]); mChart.showTooltip(tooltip, true); } }; //动画 Animation anim = new Animation().setEasing(new BounceInterpolator()).setEndAction(chartAction);

后续更新

因为本人比较懒。学习基本靠外力推动，上面的教程已近基本让大家了解了williamchart。后续如果在使用中用到了我觉得比较重要的东西，还会在这里更新的。