Привет, я пытаюсь реализовать скроллер из библиотек Teechart. Я столкнулся с проблемой при реализации скроллера. В моем случае загрузка данных в скроллер могла пойти не так. Но такая же загрузка данных хорошо работает с реализацией ползунка. Я прикрепил свой код для загрузки данных, а также скроллер здесь. Я вижу загрузку данных после выполнения быстрой перемотки вперед или воспроизведения сигнала, что является другой функцией загрузки данных. Однако скроллер не может свободно перемещаться по холсту. Он перемещается только через 10 секунд, а затем зависает, если я не загружаю данные из функции воспроизведения. Есть ли способ установить минимальное и максимальное значения вместо указания начальной длины для осей скроллера. Я заметил, что когда я устанавливаю значение minmax, загружаемые части данных также затрагиваются.
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);
}
}
Функция рисования диаграммы вместе со скроллером
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();
}