javascript - 激活阈值时 JQuery Flot 出现问题

Question

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

所以我按照这些示例作为引用

1. http://flotcharts.org/flot/examples/tracking/index.html
2. http://flotcharts.org/flot/examples/threshold/index.html

没有阈值，跟踪图完美运行

但是当激活阈值时，跟踪在第 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);
            }
        });

另一个问题，我编写了一个函数，它以时间戳形式获取当前时间并以可读形式返回时间

1431964050616 >> 2015 年 5 月 18 日 5:47:31 PM ，我已经测试过它，它工作得很好，但是当添加它时，图表却不是这样!!!

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与工作代码。