Flot從一個點到另一個點的動畫垂直線

我陷入了一點問題。你們可能已經看到了許多應用程序中像掃描儀一樣的動畫線。那麼我需要類似的東西，但我需要它在一個圖表中。Flot從一個點到另一個點的動畫垂直線

我真正需要的是我需要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)"} 
         ]} 
      };

來源

2013-03-08 madLokesh

iDemon，您粘貼代碼似乎是不完整的先導工作，繪製圖表。我看不到任何試圖建立或激活垂直「掃描線」的東西。 – 2013-03-08 09:25:26

thenx爲我newNickname ....實際上我已經修好了，應該儘快發佈答案 – madLokesh 2013-03-08 10:50:52

昨天我把這個一起響應評論。

小提琴here。

產地：

enter image description 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);

來源

2013-03-08 14:01:48 Mark

酷 - 十字準線插件很有意義。可以像[this]一樣更簡潔地編碼（http://jsfiddle.net/RUKvk/27/）。 – 2013-03-08 22:44:44

@甜菜根 - 甜菜根，不錯。我很快就寫下了這些，知道我不會爲我的代碼贏得任何風格點;） – Mark 2013-03-09 14:09:12

感謝馬克。爲了記錄，我的版本沒有運行時優勢 - 只是更簡潔的代碼。有人可能會說更具可讀性，有些人可能會說更少。 – 2013-03-09 15:10:15

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

來源

2013-03-08 10:59:32 madLokesh

不錯的嘗試，但馬克的回答很簡單。 – Gyani 2013-03-19 13:15:02

Flot從一個點到另一個點的動畫垂直線

回答

相關問題