Флот, оживляющий вертикальную линию от одной точки до другой

Question

Я застрял в небольшой проблеме. Вы, возможно, видели анимационную линию, которая действует как сканер во многих приложениях. Ну, я что-то схожу с этим, но мне нужно это на графике.

Что мне действительно нужно, так это то, что мне нужно установить вертикальную линию, которая автоматически перемещается из одной точки в другую.

Позвольте мне подробнее пояснить: 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

Я положил это вместе в ответ на комментарий вчера.

Fiddle 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)"} 
        ]} 
     };