Question

我在这里有一个示例代码，可以使用Teechart在画布上绘制随机生成的信号。我已经定义了2个画布部分。一个是为10000个样本生成信号。而第二个画布栏则描绘了主画布的预览。但是，我不希望该预览显示在第二个画布上，该画布也可用作滚动条。

我的第二个问题是当我将游侠从画布栏的一个样本移动到另一个样本时，可以重新绘制滚动条上的画布。简单来说，当我滚动滚动条是第二个画布时我添加了一个模型，它显示了栏上的颜色如何用蓝色标记，表示进度条上的段已被查看。滚动整个图表时，整个进度条将变为蓝色。

var Chart1, scroller;

function draw() {
  Chart1 = new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Area()).addRandom(10000).format.shadow.visible = false;
  Chart1.addSeries(new Tee.Line()).addRandom(10000);

  Chart1.title.text = "Chart Scroller";

  Chart1.panel.transparent = true;

  Chart1.legend.visible = false;
  Chart1.axes.bottom.setMinMax(200, 499);

  Chart1.zoom.enabled = false;
  Chart1.scroll.mouseButton = 0;
  Chart1.cursor = "pointer";
  Chart1.scroll.direction = "horizontal";

  scroller = new Tee.Scroller("canvas2", Chart1);
  scroller.onChanging = function(s, min, max) {
    document.getElementById("data").textContent = "Showing data from " + min.toFixed(0) + " to " + max.toFixed(0);
  }

  //   changeTheme(Chart1, "minimal");
  Chart1.draw();
}

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js"></script>

<body onload="draw()">
<div class="x_content">
  <br><canvas id="canvas" width="600" height="400">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
  <br/>
  <canvas id="canvas2" width="550" height="80" style="margin-left : 55px;">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
  <br/>

  <input type="checkbox" id="range" onclick="scroller.useRange(this.checked);" checked>Range
  <input type="checkbox" id="invert" onclick="scroller.invertThumb(this.checked);">Inverted
  <br/>
  <span id="data" />
</div>
</body>

有人可以帮助我吗？

Answer 1

您可以清除.scroller.onDrawThumb功能以跳过在滚动条中绘制系列。

scroller.scroller.onDrawThumb = "";

关于第二个问题，您可以将查看过的部分存储在一个数组中（即history）并使用它在自定义onDrawThumb函数中绘制蓝色矩形。

这是一个工作示例：

var Chart1, scroller;

function draw() {
  Chart1 = new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Area()).addRandom(10000).format.shadow.visible = false;
  Chart1.addSeries(new Tee.Line()).addRandom(10000);

  Chart1.title.text = "Chart Scroller";

  Chart1.panel.transparent = true;

  Chart1.legend.visible = false;
  Chart1.axes.bottom.setMinMax(200, 499);

  Chart1.zoom.enabled = false;
  Chart1.scroll.mouseButton = 0;
  Chart1.cursor = "pointer";
  Chart1.scroll.direction = "horizontal";

  scroller = new Tee.Scroller("canvas2", Chart1);

  var history = [];
  scroller.onChanging = function(s, min, max) {
    document.getElementById("data").textContent = "Showing data from " + min.toFixed(0) + " to " + max.toFixed(0);

    var done = false;
    history.forEach(function(item) {
      if (!done) {
        if ((min >= item[0]) && (min <= item[1])) {
          item[1] = Math.max(item[1], max);
          done = true;
        } else if ((max >= item[0]) && (max <= item[1])) {
          item[0] = Math.min(item[0], min);
          done = true;
        }
      }
    });
    if (!done) history.push([min, max]);
  };

  Chart1.draw();
  scroller.scroller.onDrawThumb = "";
  
  scroller.scroller.onDrawThumb = function(s) {
    var f = new Tee.Format(scroller),
      b = scroller.scroller.bounds,
      c = scroller.target,
      li = c.series,
      h, v;

    f.fill = "RGB(74, 144, 226)";
    f.stroke.fill = "";

    function saveAxis(axis, data) {
      var res = {
        mi: axis.minimum,
        ma: axis.maximum,
        sp: axis.startPos,
        ep: axis.endPos
      }
      restoreAxis(axis, data);
      return res;
    }

    function restoreAxis(axis, old) {
      axis.minimum = old.mi;
      axis.maximum = old.ma;
      axis.startPos = old.sp;
      axis.endPos = old.ep;
      axis.scale = (old.ep - old.sp) / (old.ma - old.mi);
    }

    h = saveAxis(c.axes.bottom, {
      sp: b.x,
      ep: b.x + b.width,
      mi: li.minXValue(),
      ma: li.maxXValue()
    });

    history.forEach(function(item) {
      var x1 = c.axes.bottom.calc(item[0]);
      var x2 = c.axes.bottom.calc(item[1]);
      var y1 = scroller.chartRect.y;
      var y2 = y1 + scroller.chartRect.height;
      f.rectangle(x1, y1, x2 - x1, y2);
    });

    restoreAxis(c.axes.bottom, h);
  };

  history.push([Chart1.axes.bottom.minimum, Chart1.axes.bottom.maximum]);
  Chart1.draw();
}

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js"></script>

<body onload="draw()">
  <div class="x_content">
    <br><canvas id="canvas" width="600" height="400">
  This browser does not seem to support HTML5 Canvas.
  </canvas>
    <br/>
    <canvas id="canvas2" width="520" height="50" style="margin-left : 70px;">
  This browser does not seem to support HTML5 Canvas.
  </canvas>

    <br/>
    <span id="data" />
  </div>
</body>

使用Teechart重绘画布onclick事件

1 个答案: