【问题标题】:dygraph: show maximum and minimumdygraph:显示最大值和最小值
【发布时间】:2015-02-19 19:31:50
【问题描述】:

我的问题类似于Horizontal line to show average in dygraph,但不一样。我理解使用underlayCallback,但我如何获取基础数据来计算数据的最大值和最小值。我要在数据中突出显示这些点,这些数据是从 csv 文件中读取的,如下所示:gplot.updateOptions({'file': filename}); 我事先不知道文件名,因此必须即时计算最大值、最小值。我觉得它与gplot.rawData_ 有某种关系,但不知道如何。

谢谢。

【问题讨论】:

    标签: dygraphs


    【解决方案1】:

    您可以使用其getValue method 查询 Dygraph 的数据集以获取最小值和最大值,如下所示:

    // Calculate the min/max y value in the Dygraph's data set.
    function calcMinMax(g) {
      var ymin = g.getValue(0, 1), ymax = g.getValue(0, 1), v;
      for (var i = 0; i < g.numRows(); i++) {
        for (var j = 1; j < g.numColumns(); j++) {
          y = g.getValue(i, j);
          if (y < ymin) {
            ymin = y;
          } else if (y > ymax) {
            ymax = y;
          }
        }
      }
      return [ymin, ymax];
    }
    

    要绘制线条,您需要使用underlayCallback,例如

    underlayCallback: function(ctx, area) {
      var mm = calcMinMax(this),
          ymin = mm[0],
          ymax = mm[1],
          canvasYmin = this.toDomYCoord(ymin),
          canvasYmax = this.toDomYCoord(ymax);
      ctx.strokeStyle= 'red';
      ctx.beginPath();
      ctx.moveTo(area.x, canvasYmin);
      ctx.lineTo(area.x + area.w, canvasYmin);
      ctx.moveTo(area.x, canvasYmax);
      ctx.lineTo(area.x + area.w, canvasYmax);
      ctx.closePath();
      ctx.stroke();       
    }
    

    有关工作示例,请参阅 this jsbin

    【讨论】:

    • 非常感谢。这很有帮助。
    • 如果数据放大会怎样?如何限制 xAxis 搜索范围?
    猜你喜欢
    • 2013-08-25
    • 1970-01-01
    • 2021-04-04
    • 2012-01-19
    • 1970-01-01
    • 2015-05-04
    • 1970-01-01
    • 1970-01-01
    • 2019-09-20
    相关资源
    最近更新 更多