我这里有一个示例代码，可以使用 Teechart 在 Canvas 上绘制随机生成的信号。我定义了 2 个 Canvas 部分。一个是生成 10000 个样本的信号。而第二个 Canvas 栏描绘了主 Canvas 的预览。但是，我不希望该预览显示在第二个 Canvas 上，这也是一个滚动条。
我的第二个问题是，当我将游侠从 Canvas 条的一个样本移动到另一个样本时，是否可以在滚动条上重新绘制 Canvas 。简而言之，当我滚动第二个 Canvas 的滚动条时。
我添加了一个模型，它显示了进度条上的颜色如何标记为蓝色，显示进度条上的该段已被查看。当滚动整个图表时，整个进度条将变为蓝色。
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>有人可以帮帮我吗？
最佳答案
您可以清除 .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>关于javascript - 使用 Teechart 重绘 Canvas onclick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49917506/