javascript - Tee 图表滚动条实现
问题描述
您好我正在尝试从 Teechart 库中实现滚动条。我在实现滚动条时遇到了问题。在我的情况下,将数据加载到滚动条可能出错了。但是相同的数据加载在滑块实现中效果很好。我在这里附上了我的数据加载代码和滚动条。我可以在执行快进或播放信号后看到数据加载,这是数据加载的不同功能。但是,滚动条不会在画布上自由移动。除非我从播放功能加载数据,否则它只会在最初的 10 秒后挂断。有没有办法可以设置最小值和最大值,而不是指定滚动轴的初始长度。我观察到,当我设置最小最大值时,数据加载部分也会受到影响。
function AddDataSeries() {
Chart1.series.items=[]; // empty previous content
// Take care of boundaries
// Stop at both ends when scrolling/shifting on time
if (onset<0) {
cancelAnimationFrame(myAnimation);
onset = 0;
} // Reach the start
if (onset>nPoints-timeInterval) {
cancelAnimationFrame(myAnimation);
onset = nPoints-timeInterval;
} // Reach the end
// 1. Data Segmentation for current display
var ch = 0;
for (var i=1; i<=header_nChannels; i++) {
// Declare local version data to store the data
var str = "var Y"+i+"=[];"; // var Yi = []
eval(str);
// Segment using onset
var str = "Y"+i+"=Y"+i+"_all.slice(onset, onset+timeInterval);"; // Yi = Yi_all.slice(onset, onset+timeInterval);
eval(str);
}
}
绘制 teechart 函数和滚动条
function draw_TeeChart() {
var w = window.innerWidth, h = window.innerHeight;
// Initialize Teechart
Chart1 = new Tee.Chart("canvas");
document.getElementById("canvas").style.position = "relative";
document.getElementById("canvas").width= Math.round(0.82*w);document.getElementById("canvas").height= Math.round(0.89*h); //Chart1.bounds.x = Math.round(0.01*w);
Chart1.bounds.x = 14;Chart1.bounds.y= 10;
Chart1.bounds.width = Math.round(chartW*w);Chart1.bounds.height= Math.round(0.88*h);
Chart1.legend.visible = false; Chart1.panel.transparent = true;
Chart1.title.visible = false;Chart1.axes.bottom.title.text = " ";
Chart1.axes.left.increment = 1;
Chart1.panel.transparent = true;
Chart1.legend.visible = false;
// Chart1.axes.bottom.setMinMax(0, 1);
Chart1.axes.bottom.setMinMax(onset, onset+timeInterval);
Chart1.title.visible = false;
Chart1.axes.bottom.title.text = " ";
Chart1.zoom.enabled = false;
Chart1.scroll.mouseButton = 0;
Chart1.cursor = "pointer";
Chart1.scroll.direction = "horizontal";
scroller = new Tee.Scroller("canvas2", Chart1);
scroller.min=0;
scroller.max=nPoints;
scroller.position=onset;
scroller.useRange=false;
scroller.thumbSize=12;
scroller.cursor ="pointer";
scroller.scroller.onDrawThumb = "";
Chart1.draw();
// cancelAnimationFrame(myAnimation); // no auto-play
AddDataSeries();
//Slider implementation
var slider=new Tee.Slider(Chart1);
slider.min=0;
slider.max=nPoints;
slider.position=onset;
slider.useRange=false;
slider.thumbSize=12;
slider.horizontal=true;
slider.bounds.x=Math.round(0.052*w);
slider.bounds.y= Math.round(0.85*h);
slider.bounds.width=Math.round(sliderW*w);
slider.bounds.height=25;
// Text position at cursor
chartTop = Chart1.bounds.y;
chartLeft = slider.bounds.x;
chartWidth = slider.bounds.width;
chartHeight = Chart1.bounds.height;
// Tools Add beforehand
Chart1.tools.add(slider); // slider
// Chart1.tools.add(scroller); //scroller
nTools = Chart1.tools.items.length; // remove the extra texts out of range;
slider.onChanging=function(slider,value) {
var x = Math.round(value);
if (x<0){
onset = 0;
}
else if(x>nPoints-timeInterval){
onset = nPoints-timeInterval;
}
else{
onset = x;
}
cancelAnimationFrame(myAnimation); // no auto-play
AddDataSeries();
}
解决方案
推荐阅读
- javascript - 在不提供输入的情况下调用迭代器函数会产生奇怪的行为?
- c# - 在 Post 请求中发送 DateTime
- excel - 如何拥有 2 个非常相似的 Excel 插件,一个用于生产,一个用于开发?
- python - 为什么它返回 PY_VAR0 而不是数字
- javascript - 为什么只有在物理检查无线电时才执行 eventListeners?
- python - 写入输出 CSV 格式错误/奇怪
- php - Laravel 查询构建器加入哪里
- reactjs - 如何将我的待办事项应用程序列表保存在本地存储中?
- c++ - 从向量 C++ 中删除时向量迭代器不可取消引用
- bash - 删除第一列中的重复记录,但不修改其余列