Реализация скроллера тройниковой диаграммы

Привет, я пытаюсь реализовать скроллер из библиотек 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();
}

person bhapri    schedule 13.06.2018    source источник
comment
Боюсь, здесь слишком много переменных с неизвестными значениями, чтобы воспроизвести проблему здесь. Пожалуйста, измените вопрос со ссылкой на jsfiddle или используйте Фрагменты стека   -  person Yeray    schedule 14.06.2018
comment
Привет, @Yeray, я полностью понимаю твою точку зрения. Я добавил метод AddDataSeries, чтобы проиллюстрировать, как мы передаем данные в метод draw_TeeCahrt. Пока мы можем использовать только метод draw_Teechart, чтобы выяснить, почему скроллер не работает должным образом. Вероятно, мы можем случайным образом генерировать данные. Однако я столкнулся с проблемой при установке максимальных и минимальных точек. После того, как максимальные и минимальные точки установлены, курсор для скроллера перемещается в любой конец.   -  person bhapri    schedule 18.06.2018
comment
Я также хотел бы компенсировать масштабирование скроллера.   -  person bhapri    schedule 18.06.2018