在 x 轴上浮动阈值

Question

我使用 Flot. The chart can be seen here on Codepen. I included the Flot multiple threshold plugin 创建了一个实时（每 10 毫秒更新一次）垂直样条图，但我希望阈值使用 x 轴值（在垂直图的底部）而不是y 轴值（图表左侧）。然后该图会将黑色虚线之外的所有值都涂成红色。

在示例中，您可以看到阈值使用 y 轴为阈值着色（在我的例子中，所有值都低于 constraintMax，即 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 阈值对于你想做的事情是错误的，你需要 return y > threshold.

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。

在 x 轴上浮动阈值

Flot Thresholds on x-axis

javascript

jquery

flot