Question

我使用Flot创建了一个实时（每10毫秒更新一次）垂直样条图表。可以看到图表here on Codepen。我包含了Flot multiple threshold plugin，但我希望阈值使用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轴上绘制阈值

1 个答案: