html - 选中的获取点在teechart中

Question

尝试在 mouseup 后在选定区域中获取系列值。需要计算所选的宽度和高度都在图表中相对于轴。

[`https://jsbin.com/wapovohiwe/edit?html,output`][1]

标签： htmlteechart

Answer 1

我修改了您的示例以绘制矩形并输出

Chart1 = new Tee.Chart("canvas");
Chart1.legend.visible = false;
Chart1.panel.format.gradient.visible = false;
Chart1.panel.format.fill = "white";
Chart1.walls.back.format.fill = "white";

Chart1.addSeries(new Tee.Line([1, 3, 0, 2, 7, 5, 6]));

Chart1.zoom.enabled = false;

var myFormat = new Tee.Format(Chart1);
myFormat.transparency = 0.9;

var rect = {},
  drag = false;

Chart1.mousedown = function(e) {
  rect.startX = e.x - canvas.offsetLeft - canvas.parentElement.offsetLeft - canvas.parentElement.parentElement.offsetLeft;
  rect.startY = e.y - canvas.offsetTop - canvas.parentElement.offsetTop - canvas.parentElement.parentElement.offsetTop;
  drag = true;
}

Chart1.mouseup = function(p) {
  var i, tmpP = {};
  points = [];
  var s = Chart1.series.items[0];
  for (i = 0; i < s.count(); i++) {
    s.calc(i, tmpP);
    if ((tmpP.x >= rect.startX) && (tmpP.x <= rect.startX + rect.w) && (tmpP.y >= rect.startY) && (tmpP.y <= rect.startY + rect.h))
      console.log("index: " + i + ", value: " + s.data.values[i]);
  }

  drag = false;
}

Chart1.mousemove = function(e) {
  if (drag) {
    rect.w = e.x - rect.startX;
    rect.h = e.y - rect.startY;

    drawChart();
  }
}

function drawChart() {
  Chart1.draw();
  myFormat.rectangle(rect.startX, rect.startY, rect.w, rect.h);
}


Chart1.draw();

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>

<canvas id="canvas" height="400" width="700"></canvas>