javascript - float如何使用阈值并具有曲线？

Question

如何使用threshold插件并在时间图上有曲线？这个online fiddle我发现了，不知道它是如何制作的

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>

另外如何使动画流畅？

更新

我尝试添加 null 检查，以便 yaxes 不会从 0 到 120，但这样做会使线条不再弯曲。

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;
    }

Answer 1

获取您的问题的解决方案here并添加阈值插件(在 curveLines 插件运行之后):

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

查看此updated fiddle对于完整的包。动画也会自动变得更加平滑，因为 curveLines 插件增加了动画中的数据点和步骤的数量。