한 지점에서 다른 지점으로 수직선을 움직이는 플로트

Question

나는 약간의 문제에 봉착했습니다. 사람들은 많은 앱에서 스캐너처럼 움직이는 애니메이션 라인을 보았을 것입니다. 글쎄, 나는 비슷한 것을 썼지 만, 나는 그것을 그래프로 필요로한다.

필자가 실제로 필요한 것은 필자가 한 지점에서 다른 지점으로 자동 이동하는 수직선을 plt해야한다는 것입니다.

좀 더 설명해 드리겠습니다. 1. 버튼이 있습니다. 2. 버튼을 누르면 그래프 영역이 나타납니다. 3. 그래프 영역에서 영역을 스캔하는 것처럼 수직선이 영역을 스크롤합니다.

나는 선을 그릴 수 있지만 조금 기울어지고있다. 그 뒤에 논리는 아래와 같습니다 :

for(i=0;i<frequencyArray.length;i++){ 
       myTestArray2.push([i,outFrequencyArray[i]]); 
      } 

plot.setData([ 
       {data:myTestArray2,lines:{fill:false,lineWidth:3},shadowSize:10} 
        ]); 

function setUpflot(){ 
      // setup plot 

      //console.log("setUpflot"); 
      var options = { 
       // series : { shadowSize: 0, splines: {show:true,lineWidth:1}}, 
       series : { }, 

       yaxis : { ticks: 5, tickColor:"rgba(148,129,151,0.5)", min: minGraphY, max:maxGraphY,show: true}, 
       xaxis : { tickLength:0, show: false }, 
       grid : { borderWidth:0,markings:[ 
           {yaxis: { from: 200.0, to: 240.0 },color: "rgba(140,2,28,0.5)"} 
         ]} 
      }; 

Answer 1

가 어제 코멘트에 응답 이것을 함께 넣어.

피들 here.

는 생산 :

plot = $.plot($("#placeholder"), 
    [ { data: someData} ], { 
    series: { 
    lines: { show: true } 
    }, 
    crosshair: { mode: "x" }, // turn crosshair on 
    grid: { hoverable: true, autoHighlight: false }, 
    yaxis: { min: -1.2, max: 1.2 } 
}); 

crossHairPos = plot.getAxes().xaxis.min; 
direction = 1; 

setCrossHair = function(){ 
    if (direction == 1){ 
    crossHairPos += 0.5; 
    } 
    else 
    { 
     crossHairPos -= 0.5; 
    } 
    if (crossHairPos < plot.getAxes().xaxis.min){ 
     direction = 1; 
     crossHairPos = plot.getAxes().xaxis.min; 
    } 
    else if (crossHairPos > plot.getAxes().xaxis.max) 
    { 
     direction = 0; 
     crossHairPos = plot.getAxes().xaxis.max; 
    } 
    plot.setCrosshair({x: crossHairPos}) 
    setTimeout(setCrossHair,100); 
} 

// kick it off 
setTimeout(setCrossHair,100); 

Answer 2

var frequencyIndex = 0; //dynamic values stored intialised with 0. 
var outFrequencyArray = []; 

for(i=0;i<totalPoints;i++){ 

       outFrequencyArray.push(minGraphY-1); 
      } 


opd=Math.tan(Math.PI/2); 
outFrequencyArray.splice(frequencyIndex,0,opd); 
frequencyIndex++; 
for(i=0;i<frequencyArray.length;i++){ 
myTestArray2.push([i,outFrequencyArray[i]]); 
     } 

plot.setData([ 
      {data:myTestArray2,lines:{fill:false,lineWidth:3},shadowSize:10} 
       ]); 

function setUpflot(){ 
     // setup plot 

     //console.log("setUpflot"); 
     var options = { 
      // series : { shadowSize: 0, splines: {show:true,lineWidth:1}}, 
      series : { }, 

      yaxis : { ticks: 5, tickColor:"rgba(148,129,151,0.5)", min: minGraphY, max:maxGraphY,show: true}, 
      xaxis : { tickLength:0, show: false }, 
      grid : { borderWidth:0,markings:[ 
          {yaxis: { from: 200.0, to: 240.0 },color: "rgba(140,2,28,0.5)"} 
        ]} 
     };