关于插值和拟合
（出自：https://wenku.baidu.com/view/673980ae580216fc710afd48.html）
在实际中，常常要处理由实验或测量所得到的一些离散数据。插值与拟合方法就是通过这些数据去确定某一类已知函数的参数或寻求某个近似函数，使所得到的近似函数与已知数据有较高的捏合精度。
如果要求这个函数（曲线或曲面）经过所已知的所有的数据点，则称此类问题为插值问题。（不需要函数表达式）
如果不要求近似函数通过所有数据点，而是要求它能较好地反映数据变化规律的近似函数的方法成为数据拟合。（必须有函数表达式）
近似函数不一定（曲线或曲面）通过所有的数据点。


关于曲线的实现
平滑曲线实现效果图：



由于最终的成品为坐标图表，需要经过已知的数据点，所以平滑曲线的实现采用的插值法（此处采用的三次样条插值法）。
本质上，折线和平滑曲线的实现思路基本是一致的，只不过采用了插值方法在原有点的基础上进行了点的补充，进而无限接近平滑。

线条的绘制为 UIBezierPath + CAShapeLayer 来实现。
再此处有一个渐显的动画，结合 CABasicAnimation  指定 strokeEnd 属性来实现。


实现代码：http://download.csdn.net/download/u013410274/10228930
三次样条插值参考博客：https://haoxiang.org/2011/06/cubic-spline-interpolation-curve-fitting/

plt.scatter绘制散点图
 
plt.plot绘制折线图
 
使用scipy库可以进行曲线的smooth
 
import matplotlib.pyplot as plt
import numpy as np
from scipy.interpolate import spline

x = np.array([1, 3, 5, 7, 8])
y = np.array([1, 2, 9, 16, 15])

x_new = np.linspace(x.min(),x.max(),300) #300 represents number of points to make between T.min and T.max
y_smooth = spline(x,y,x_new)
#散点图
plt.scatter(x, y, c='black',alpha = 0.5)  #alpha:透明度) c:颜色
#折线图
plt.plot(x, y, linewidth=1)  #线宽linewidth=1
plt.plot(x, y,c='dimgray', linewidth=0.9,label='示例') #label：某个线条代表什么的标签
plt.legend(loc='best')  # loc选项可以选择label的位置
#平滑后的折线图
plt.plot(x_new,y_smooth,c='red')

# 解决中文显示问题
plt.rcParams['font.sans-serif'] = ['SimHei']  #SimHei黑体  FangSong仿宋
plt.rcParams['axes.unicode_minus'] = False

plt.title("绘图", fontsize=24)#标题及字号
plt.xlabel("X", fontsize=24)#X轴标题及字号
plt.ylabel("Y", fontsize=24)#Y轴标题及字号
plt.tick_params(axis='both', labelsize=14)#刻度大小
#plt.axis([0, 1100, 1, 1100000])#设置坐标轴的取值范围
plt.show()

#plt.save('squares_plot.png'（文件名）, bbox_inches='tight'（将图表多余的空白部分剪掉）)
#用它替换plt.show实现自动保存图表
 
效果图：
 
 
关于绘图的颜色c设置
 

上一篇文章我们通过getLineChartView来实现了折线图的显示
 
ChartFactory.getLineChartView(mContext, dataset, renderer);
 
而通过查看API我们发现achartengine还提供了一个getCubeLineChartView来获取一个显示平滑曲线的view，使用起来和获取普通折线图没有太大的区别
 
ChartFactory.getCubeLineChartView(mContext, dataset, renderer, 0.3F);
 
这里多了最后一个设置平滑度的系数，效果图如下： 
  
 通过观察效果图我们发现曲线并没有经过我们设置的点，怎么回事，我们的程序有BUG了？显然并不是。在解释这个情况之前，我们需要理解一个概念：贝塞尔曲线
 
这里我假设你已经大概浏览了维基百科的内容，因此我们知道贝塞尔曲线必过两个端点，并且受控制点控制，achartengine在绘制平滑曲线的时候使用的三阶贝塞尔曲线（安卓在Path.java这个类中只提供了二阶quadTo和三阶cubicTo贝塞尔曲线），这里引用一下维基百科上的图片可以更加直观的展现三阶贝塞尔曲线的绘制过程 
  
 通过观察上图我们发现三阶贝塞尔曲线必过P0和P3点，受P1和P2点控制，好了概念介绍完毕，我们就可以来解释一下为什么achartengine的平滑曲线没有经过数据点了。
 
在achartengine的源码CubicLineChart.java中
 
  protected void drawPath(Canvas canvas, List<Float> points, Paint paint, boolean circular) {
    Path p = new Path();
    float x = points.get(0);
    float y = points.get(1);
    p.moveTo(x, y);

    int length = points.size();
    if (circular) {
      length -= 4;
    }

    Point p1 = new Point();
    Point p2 = new Point();
    Point p3 = new Point();
    for (int i = 0; i < length; i += 2) {
      int nextIndex = i + 2 < length ? i + 2 : i;
      int nextNextIndex = i + 4 < length ? i + 4 : nextIndex;
      calc(points, p1, i, nextIndex, mSecondMultiplier);
      p2.setX(points.get(nextIndex));
      p2.setY(points.get(nextIndex + 1));
      calc(points, p3, nextIndex, nextNextIndex, mFirstMultiplier);
      // From last point, approaching x1/y1 and x2/y2 and ends up at x3/y3
      p.cubicTo(p1.getX(), p1.getY(), p2.getX(), p2.getY(), p3.getX(), p3.getY());
    }
   ...//省略部分代码
    canvas.drawPath(p, paint);
  }
 
其中P对应上图中的P0，而P1,P2,P3依次对应贝塞尔曲线的P1,P2,P3，这里需要说明一下的是，P1和P3是根据平滑度系数计算得出的点，而P2则是我们自己设置的点，根据贝塞尔曲线公式，曲线是不会经过P2的，因为我们的数据点在贝塞尔曲线中充当了控制点的角色。这就解释了为什么我们使用getCubeLineChartView的时候曲线没有经过数据点。 
 有些聪明的同学可能会立即反应，如果我们将数据点设置为曲线的端点就可以让曲线经过数据点了，因为贝塞尔曲线是必过端点的，这里我不建议这样做，因为这样绘制出来的曲线会非常难看，喜欢动手的同学可以自己试一下

一.说明：
 
基于刘大师的自定义自定义控件之简单曲线图表控件，添加了动画和曲线平滑的功能。
 动画就是数据点有个滑动渐变的过程。
 曲线平滑主要采用贝塞尔曲线产生平滑曲线。
 
二.功能演示
 

 
 
 
 
三.部分代码说明
 
1.平滑曲线生成
 
QPainterPath CurveChart::generateSmoothCurve(const QList<QPointF> &points)
{
    QPainterPath path;
    int len = points.size();
    if (len < 2) {
        return path;
    }

    QList<QPointF> firstControlPoints;
    QList<QPointF> secondControlPoints;

    calculateControlPoints(points, &firstControlPoints, &secondControlPoints);
    path.moveTo(points[0].x(), points[0].y());

    // Using bezier curve to generate a smooth curve.
    for (int i = 0; i < len - 1; ++i) {
        path.cubicTo(firstControlPoints[i], secondControlPoints[i], points[i+1]);
    }

    return path;
}

void CurveChart::calculateControlPoints(const QList<QPointF> &knots, QList<QPointF> *firstControlPoints, QList<QPointF> *secondControlPoints)
{
    int n = knots.size() - 1;
    for (int i = 0; i < n; ++i) {
        firstControlPoints->append(QPointF());
        secondControlPoints->append(QPointF());
    }

    if (n == 1) {
        // Special case: Bezier curve should be a straight line.
        // P1 = (2P0 + P3) / 3
        (*firstControlPoints)[0].rx() = (2 * knots[0].x() + knots[1].x()) / 3;
        (*firstControlPoints)[0].ry() = (2 * knots[0].y() + knots[1].y()) / 3;
        // P2 = 2P1 – P0
        (*secondControlPoints)[0].rx() = 2 * (*firstControlPoints)[0].x() - knots[0].x();
        (*secondControlPoints)[0].ry() = 2 * (*firstControlPoints)[0].y() - knots[0].y();
        return;
    }

    // Calculate first Bezier control points
    double *xs = new double[n];
    double *ys = new double[n];
    double *rhsx = new double[n]; // Right hand side vector
    double *rhsy = new double[n]; // Right hand side vector

    // Set right hand side values
    for (int i = 1; i < n - 1; ++i) {
        rhsx[i] = 4 * knots[i].x() + 2 * knots[i + 1].x();
        rhsy[i] = 4 * knots[i].y() + 2 * knots[i + 1].y();
    }
    rhsx[0] = knots[0].x() + 2 * knots[1].x();
    rhsx[n - 1] = (8 * knots[n - 1].x() + knots[n].x()) / 2.0;
    rhsy[0] = knots[0].y() + 2 * knots[1].y();
    rhsy[n - 1] = (8 * knots[n - 1].y() + knots[n].y()) / 2.0;

    // Calculate first control points coordinates
    calculateFirstControlPoints(xs, rhsx, n);
    calculateFirstControlPoints(ys, rhsy, n);

    // Fill output control points.
    for (int i = 0; i < n; ++i) {
        (*firstControlPoints)[i].rx() = xs[i];
        (*firstControlPoints)[i].ry() = ys[i];
        if (i < n - 1) {
            (*secondControlPoints)[i].rx() = 2 * knots[i + 1].x() - xs[i + 1];
            (*secondControlPoints)[i].ry() = 2 * knots[i + 1].y() - ys[i + 1];
        } else {
            (*secondControlPoints)[i].rx() = (knots[n].x() + xs[n - 1]) / 2;
            (*secondControlPoints)[i].ry() = (knots[n].y() + ys[n - 1]) / 2;
        }
    }

    delete[] xs;
    delete[] ys;
    delete[] rhsx;
    delete[] rhsy;
}

void CurveChart::calculateFirstControlPoints(double *&result, const double *rhs, int n)
{
    double *tmp = new double[n];
    double b = 2.0;
    result[0] = rhs[0] / b;

    // Decomposition and forward substitution.
    for (int i = 1; i < n; i++) {
        tmp[i] = 1 / b;
        b = (i < n - 1 ? 4.0 : 3.5) - tmp[i];
        result[i] = (rhs[i] - result[i - 1]) / b;
    }

    for (int i = 1; i < n; i++) {
        result[n - i - 1] -= tmp[n - i] * result[n - i]; // Backsubstitution.
    }

    delete[] tmp;
}
 
只需调用generateSmoothCurve，将原始的点输入进去返回QPainterPath，然后再用painter调drawPath就行了，比如painter->drawPath(generateSmoothCurve(listPoints));
 （ps:这部分的代码抄的深度系统监视器的源码）
 
2.动画说明
 就是一个渐变的过程，比如第二个点来时，原本的第一个位置的点要慢慢移动到第二个点，以此循环，直到所有的点都移动完成，基本原理就是开个定时器，数据改变时每隔1ms调用1次update，每次update时都从上次的点逐渐往目标逼近1个像素点，直至重合的过程。