如何使用js求出一条曲线的拐点位置并做出切线?

######如何使用js求出一条曲线的拐点位置并做出切线?

data = [
{x:0,y:23},{x:0.1,y:23.5},{x:0.5,y:24},{x:0.8,y:24.5},{x:1,y:24.6},{x:1.2,y:24.7},{x:1.4,y:25},
{x:1.6,y:28},{x:1.8,y:40},{x:2,y:60},{x:2.2,y:63},{x:2.4,y:63.2}
];

图表曲线图片

img

计算出曲线数据的两个拐点位置,并做出切线 (效果如下图)

img

//手动输入三组两点 做好三条线切线  最后计算两个交点
drawLine(no){
  this.leftData = this.chart1.chartData[0].data.length;
  let temp1 = this.line[no].temp1;
  let temp2 = this.line[no].temp2;
  let rawData = this.chart1.chartData[0].data;
  let rawLabel = this.chart1.chartLabels;
  let disp1 = rawData[rawLabel.indexOf(parseFloat(temp1))];
  let disp2 = rawData[rawLabel.indexOf(parseFloat(temp2))];
  let fty1 = rawLabel.indexOf(parseFloat(temp1));
  let fty2 =rawLabel.indexOf(parseFloat(temp2));
  let gap = (disp2 - disp1)/(parseFloat(fty2)-parseFloat(fty1));
  let start= disp1 - parseFloat(fty1)*gap;
  this.line[no].b1 = start;
  this.line[no].k1 = gap; 
  let data = [];
  for(let i = 0; i < rawData.length; i++){
    let t=  parseFloat(start.toString())+parseFloat(gap.toString())*i;
    t>0? data.push(t) : data.push("") 
  }
  this.chart1.chartData[no+1].data = data;
//两个交点计算(b2-b1)/ (k1-k2)
  if(this.chart1.chartData[1].data.length>0 && this.chart1.chartData[2].data.length>0){
    let a = (this.line[1].b1-this.line[0].b1) / (this.line[0].k1-this.line[1].k1);
    this.index1 =parseInt(a.toString());
    this.point1 =rawLabel[this.index1];
  }
  if(this.chart1.chartData[1].data.length>0 && this.chart1.chartData[3].data.length>0){
    let b = (this.line[2].b1-this.line[0].b1) / (this.line[0].k1-this.line[2].k1);
    this.index2 = parseInt(b.toString());
    this.point2 = rawLabel[this.index2] ;
  }
}

img

svg贝尔曲线,慢慢找角度调整
三条线的两个交点就是控制点