javascript - TeeChart HTML 5 javascript中光标和线条之间的交集

Question

如何在 TeeChart javascript HTML 5 中找到并显示光标工具和 line serie 之间的交集？谢谢你。

Answer 1

您可以计算光标onchange事件处的插值位置。这是一个例子：

var Chart1;

function draw() {
  Chart1=new Tee.Chart("canvas1");

  for (i=0;i<3;i++) {
    Chart1.addSeries(s=new Tee.Line().addRandom(15));
    var p = s.pointer;
    p.visible="true";
    p.width=8;
    p.height=8;
    switch (i) {
      case 1: p.style="sphere";
        break;
      case 2: p.style="triangle";
        break;
      default: p.style="rectangle";
    }
  }

  var t=new Tee.CursorTool(Chart1);
  t.direction="vertical";
  Chart1.tools.add(t);
  var xValue;

  t.onchange=function(p) {
    xValue=Chart1.axes.bottom.fromPos(p.x);

    Chart1.title.items=[];
    for (var i=0; i<Chart1.series.items.length; i++){
      Chart1.title.add(Chart1.series.items[i].title+': Y('+xValue.toFixed(2)+')= '+interpolateLineSeries(Chart1.series.items[i],xValue).toFixed(2));
    }

    Chart1.draw();
  };

  Chart1.ondraw=function() {
    var xs=this.axes.bottom.calc(xValue);

    for (var i=0;i<this.series.items.length;i++) {
      var ys=this.axes.left.calc(interpolateLineSeries(this.series.items[i],xValue));
      var f=new Tee.Format(this);
      f.fill=this.series.items[i].format.fill;
      f.ellipse(xs,ys,8,8);
    }
  }

  Chart1.draw();
}

function interpolateLineSeries(s, xval) {
  var yValues=s.data.values;
  var len=yValues.length;
  var xValues=[];

  if (s.data.x)
    xValues=s.data.x;
  else {
    for (i=0;i<len;i++)
      xValues[i]=i;
  }

  var index;
  for (index=0;index<len;index++) {
    if (xValues[index]>xval)
      break;
  }

  if (index<1)
    index=1;
  else
    if (index>=len)
      index=len-1;

  var dx=xValues[index] - xValues[index-1];
  var dy=yValues[index] - yValues[index-1];

  if (dx!=0)
    return dy*(xval - xValues[index-1])/dx + yValues[index-1];
  else
    return 0;
}