在TeeChart HTML 5 javascript中光标和行之间的交集

Intersection between cursor and line in TeeChart HTML 5 javascript

本文关键字：之间 光标 HTML TeeChart javascript      更新时间：2023-09-26

如何在TeeChart javascript HTML 5中找到并显示光标工具和行系列之间的交集?谢谢你。

您可以计算光标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;
}
相关文章：