javascript - x 轴上的 float 阈值

Question

我使用 Flot 创建了一个实时(每 10 毫秒更新一次)垂直样条图。图表可见here on Codepen 。我包括了 Flot multiple threshold plugin ，但我希望阈值使用 x 轴值(在垂直图表的底部)而不是 y 轴值(图表的左侧)。然后，该图会将黑色虚线之外的所有值绘制为红色。

在示例中，您可以看到阈值使用 y 轴来为阈值着色(在我的例子中，所有值都低于 constrainMax，即 60)。

操作代码行是我设置选项的地方(更新函数中的第 79 行):

  var options = {
    xaxis: {
      position: 'bottom',
      min: -10,
      max: 100
    },
    yaxis: {
      position: 'left',
      min: iterator,
      max: updatedData.length-1+iterator,
      transform: function (v) { return -v; },  
      inverseTransform: function (v) { return -v; }
    }
  };

我设置约束的位置(更新函数中的第 66 行):

  var constraintMax = {
    threshold: 60,
    color: "rgb(255,0,0)",
    evaluate : function(y,threshold){ return y < threshold; }
  }

  var constraintMin = {
    threshold: 25,
    color: "rgb(255,0,0)",
    evaluate : function(y,threshold){ return y < threshold; }
  }

我实际绘制的位置(更新函数中的第 93 行):

$.plot("#"+elementID, [{data: updatedData, constraints: [constraintMin, constraintMax]}, {data: initialMinData, color: "#000000", dashes: { show: true }}, {data: initialMaxData, color: "#000000", dashes: { show: true }}], options);

有人知道如何将虚线之外的情节涂成红色吗？预先感谢您。

Answer 1

多阈值插件仅支持开箱即用的 y 值阈值。因此你必须根据你的情节改变它。我将代码复制到 jsfiddle(我不喜欢 codepen)中并在那里进行了更改。

1) 您的 constraintMax 阈值对于您想要执行的操作来说是错误的，您需要返回 y > 阈值。

2)多阈值插件的变化:

if (evaluate(currentPoint[1], threshold)) {
                          v
if (evaluate(currentPoint[0], threshold)) {

和

function _getPointOnThreshold(threshold, prevP, currP) {
    var currentX = currP[0];
    var currentY = currP[1];

    var prevX = prevP[0];
    var prevY = prevP[1];

    var slope = (threshold - currentX) / (prevX - currentX);
    var yOnConstraintLine = slope * (prevY - currentY) + currentY;

    return [threshold, yOnConstraintLine];
}

请参阅fiddle对于工作示例。