激活阈值时 JQuery Flot 的问题

Question

我正在尝试为需要阈值和跟踪的项目绘制图表。

所以我按照这些例子作为参考

没有阈值，跟踪的情节完美

但是当激活阈值时，跟踪在第 3 和第 4 行不起作用，只在前 2 行起作用，其他都不起作用

这是我的代码，

    <script src="../../plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <script src="../../plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
     <!-- FLOT crosshair PLUGIN - allows the chart to be tracking -->
    <script src="../../plugins/flot/jquery.flot.crosshair.min.js" type="text/javascript"></script>
    <script src="../../plugins/flot/jquery.flot.threshold.min.js" type="text/javascript"></script>
    <script src="../../plugins/flot/jquery.flot.time.min.js" type="text/javascript"></script>
........
........    
plot = $.plot("#PH-chart", [
            { data: PH1, color: "#3c8dbc", label: "PH1(x) = 0.00"},
            { data: PH2, color: "#00c0ef", label: "PH2(x) = 0.00" },
            { data: PH3, color: "#3cffff", label: "PH3(x) = 0.00"},
            { data: PH4, color: "#0ff0ef", label: "PH4(x) = 0.00" }
        ], {
            series: {
                threshold: {
                    below: 7,
                    color: "rgb(200, 20, 30)"
                },
                lines: {
                    show: true
                }
            },
            crosshair: {
                mode: "x"
            },
            grid: {
                hoverable: true,
                autoHighlight: true,
                borderColor: "#f3f3f3",
                borderWidth: 1,
                tickColor: "#f3f3f3"
            },
            yaxis: {
                max: 14
            },
            xaxis: {
                show: true,
                mode: "time",
                minTickSize: [1, "hour"],
                twelveHourClock: true
            }
        });

        var legends = $("#PH-chart .legendLabel");

        var updateLegendTimeout = null;
        var latestPosition = null;

        function updateLegend() {

            updateLegendTimeout = null;

            var pos = latestPosition;

            var axes = plot.getAxes();
            if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
                pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
                return;
            }

            var i, j, dataset = plot.getData();
            for (i = 0; i < dataset.length; ++i) {

                var series = dataset[i];

                // Find the nearest points, x-wise

                for (j = 0; j < series.data.length; ++j) {
                    if (series.data[j][0] > pos.x) {
                        break;
                    }
                }

                // Now Interpolate

                var y,
                    p1 = series.data[j - 1],
                    p2 = series.data[j];

                if (p1 == null) {
                    y = p2[1];
                } else if (p2 == null) {
                    y = p1[1];
                } else {
                    y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
                }

                legends.eq(i).text(series.label.replace(/x.*/,  + series.data[j][0] + ") = " + y.toFixed(2)));
            }
        }

        $("#PH-chart").bind("plothover",  function (event, pos, item) {
            latestPosition = pos;
            if (!updateLegendTimeout) {
                updateLegendTimeout = setTimeout(updateLegend, 50);
            }
        });

另一个问题，我写了一个函数，它在时间戳中获取当前时间，并且 return 时间具有可读形式

1431964050616 >> 2015 年 5 月 18 日 5:47:31 下午，我已经对其进行了测试并且它运行良好但是当添加它时图表不是！！！

function displayTime(currentTime) {
        var str = "";
        var hours = currentTime.getHours()
        var minutes = currentTime.getMinutes()
        var seconds = currentTime.getSeconds()

        if (minutes < 10) {
            minutes = "0" + minutes
        }
        if (seconds < 10) {
            seconds = "0" + seconds
        }
        str += hours + ":" + minutes + ":" + seconds + " ";
        if(hours > 11){
            str += "PM"
        } else {
            str += "AM"
        }
        return str;
    }

我已经调用图表代码中的函数将其更改为例如PH1( 05:30:30 PM) = 11.2 但我不知道问题出在哪里！

legends.eq(i).text(series.label.replace(/x.*/,  + displayTime(series.data[j][0]) + ") = " + y.toFixed(2)));

希望能解决，先谢谢了

Answer 1

阈值插件将数据系列分成两部分，一部分高于阈值，一部分低于阈值。这使得您的四个数据系列中有六个（两个仅具有高于阈值的值）。代码中的两个相关更改：

跳过阈值插件添加的系列
将 legends.eq(i) 中的 i 替换为 labelindex，因为 i 从 0 到 5，图例中只有 4 个标签

新代码：

for (i = 0; i < dataset.length; i++) {        
    var series = dataset[i];
    if (series.data.length == 0) {
        continue;  // if this is a threshold added series, skip it and continue with the next one
    }

    // Find the nearest points, x-wise
    for (j = 0; j < series.data.length; j++) {
        if (series.data[j][0] > pos.x) {
            break;
        }
    }

    // Now Interpolate
    var y,
        p1 = series.data[j - 1],
        p2 = series.data[j];

    if (p1 === undefined) {
        y = p2[1];
    } else if (p2 === undefined) {
        y = p1[1];
    } else {
        y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
    }

    var labelindex = parseInt(series.label.substr(2, 1));
    legends.eq(labelindex - 1).text(series.label.replace(/x.*/, +series.data[j][0] + ") = " + y.toFixed(2)));
}

查看此 fiddle 和工作代码。

Answer 2

我有一个类似的解决方法，它引入了一个校正索引 c。

var c = 0;
for (i = 0; i < dataset.length; i++) {        
   var series = dataset[i];
   if (series.data.length == 0) {
        e = e + 1;
        continue;  // if this is a threshold added series, skip it and continue with the next one
  }

// Find the nearest points, x-wise
for (j = 0; j < series.data.length; j++) {
    if (series.data[j][0] > pos.x) {
        break;
    }
}

// Now Interpolate
var y,
    p1 = series.data[j - 1],
    p2 = series.data[j];

if (p1 === undefined) {
    y = p2[1];
} else if (p2 === undefined) {
    y = p1[1];
} else {
    y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
}
 legends.eq(i-c).text(series.label.replace(/x.*/,  + series.data[j][0] + ") = " + y.toFixed(2)));


 }

激活阈值时 JQuery Flot 的问题

Issues with JQuery Flot when activating the threshold

javascript

jquery

charts

flot