1

私はちょっとした問題で立ち往生しています。多くのアプリでスキャナーのように機能するアニメーションの線を見たことがあるかもしれません。私はそれに似たものを見つけましたが、グラフで必要です。

私が実際に必要としているのは、ある点から別の点に自動的に移動する垂直線をプロットする必要があるということです。

もう少し説明しましょう。 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)"}
                        ]}
             };
4

2 に答える 2

6

昨日コメントいただいたのでまとめました。

ここでフィドル。

プロデュース:

ここに画像の説明を入力

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-08T14:01:48.697 に答える
1 
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-08T10:59:32.433 に答える