Javascript Tee图表滚动器的实现

Javascript Tee图表滚动器的实现,javascript,canvas,teechart,scroller,Javascript,Canvas,Teechart,Scroller,嗨,我正在尝试从Teechart库实现scroller。我在实现滚动条时遇到了一个问题。在我的例子中,将数据加载到滚动条可能出错。但同样的数据加载也适用于滑块实现。我在这里附上了我的数据加载代码和滚动条。在执行快进或播放信号后,我可以看到数据加载,这是数据加载的不同功能。但是,滚动条不能在画布上自由移动。它只移动最初的10秒,除非我从播放函数加载数据,否则它将挂起。是否有一种方法可以设置最小值和最大值,而不是指定滚动轴的初始长度。我观察到,当我设置minmax值时,数据加载部分也会受到影响 fu

嗨,我正在尝试从Teechart库实现scroller。我在实现滚动条时遇到了一个问题。在我的例子中,将数据加载到滚动条可能出错。但同样的数据加载也适用于滑块实现。我在这里附上了我的数据加载代码和滚动条。在执行快进或播放信号后,我可以看到数据加载,这是数据加载的不同功能。但是,滚动条不能在画布上自由移动。它只移动最初的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);
    }
}
函数AddDataSeries(){
Chart1.series.items=[];//清空以前的内容
//注意边界
//按时滚动/换档时两端停止
if(onsetnPoints时间间隔){
取消动画帧(myAnimation);
开始=nPoints时间间隔;
}//到达终点
//1.当前显示的数据分割
var-ch=0;

对于(var i=1;我担心有太多未知值的变量无法重现此问题。请使用JSFIDLE链接修改此问题,或者使用Hi,@Yeray我完全理解您的观点。我添加了AddDataSeries方法来说明我们将数据传递给draw_TeeCahrt方法的方式。我们只能使用draw_Teech艺术的方法,目前正在调查为什么滚动不按预期工作。也许我们可以随机生成数据。但我面临的问题,而设置最大和最小点。一旦最大和最小点设置滚动光标移动到任何一端。我还想抵消滚动缩放。
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();
}