flot如何使用閾值和彎曲線？

如何使用threshold插件並在時間圖上有曲線？這online fiddle我發現，不知道它是怎麼做flot如何使用閾值和彎曲線？

var datasets = [{"points":{"show":false},"lines":{"show":true},"curvedLines":{"apply":true,"tension":1},"animator":{"start":0,"steps":14,"duration":3000,"direction":"right"},"data":[[1455851700000,99.65],[1455854400000,99.68],[1455858000000,99.73],[1455861600000,99.71],[1455865200000,99.7],[1455868800000,99.68],[1455872400000,99.65],[1455872400000,99.65],[1455909428571.4285,99.65],[1455912000000,99.7],[1455915600000,99.68],[1455919200000,99.72],[1455922800000,99.72]]}]; 
 

 
var options = {"xaxis":{"mode":"time","timeformat":"%H:%M <br> %d %b ","tickSize":[3,"hour"]},"yaxes":{"position":"left","max":100,"min":98},"series":{"lines":{"show":true,"lineWidth":3},"curvedLines":{"active":false},"threshold":[{"below":99.65,"color":"rgb(204, 0, 0)"}]},"colors":["#008C00"],"legend":{"show":false},"grid":{"clickable":true,"hoverable":true}}; 
 

 
$.plotAnimator($('#CAGraph'), datasets, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script> 
 
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.threshold.js"></script> 
 

 
<div id="choices_CAGraph"></div> 
 
<div id="CAGraph" style="width:910px;height:400px"></div> 
 
<div id=tooltip class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

而且我怎樣才能使動畫順利？

UPDATE

我已嘗試添加null檢查，以便在yaxes沒有得到從0到120，但adoing這將使此行沒有任何彎曲的多。

for (var i = 0; i < chartcount; i++) { 
     var newData = plot.getData()[i].datapoints.points; 
     datasets[i].data = []; 
     for (var j = 0; j < newData.length; j = j + 2) { 
      if(newData[j] != null) 
       datasets[i].data.push([newData[j], newData[j + 1]]); 
     } 
     datasets[i].animator.steps = (newData.length/2) - 1; 
    }

來源

2016-02-20 shorif2000

這個問題有點不清楚。原則上它是你以前的兩個問題的組合[這裏]（http://stackoverflow.com/questions/35268446/flot-toggle-series-with-threshold-and-curved-lines-plugin）和[here]（ http://stackoverflow.com/questions/35259594/flot-multiple-line-graph-animation），對吧？如果你明確表示，這個問題會更容易理解。 – Raidri

上一個問題，我正在多線工作。這一條只是一條線。我試圖在1個時間線上做同樣的事情 – shorif2000

以解決你的問題here並添加門檻插件（在curvedLines插件運行後）：

options.series.threshold = [{ 
      below: 97, 
      color: "red" 
     }];

爲全包看到這個updated fiddle。動畫也會自動更平滑，因爲curveLines插件會增加動畫中數據點和步驟的數量。

來源

2016-02-20 10:11:10 Raidri

我測試了你的代碼，它對於它們之間有很大區別的點很適用。然而，當數據點靠得很近時，曲線變成一條直線。我已經更新了上面的代碼 – shorif2000

在您更新的代碼中，您不會加載curvedLines插件，並且已經設置了'curvedLines：{active：false}'。但即使您激活了插件，也會像以前一樣遇到一些問題，因爲您嘗試將曲線和動畫製作器一起使用，但無法使用。像在我的小提琴一樣在兩個單獨的步驟中使用它們。這裏有一個[更新的小提琴]（https://jsfiddle.net/L0vtrgc2/8/）與你的新數據。 – Raidri

flot如何使用閾值和彎曲線？

回答

相關問題