FLOT中的趋势线 [英] Trendline in FLOT

问题描述

我包括了jquery.flot.trendline.js. 从此处

这是我的代码

$.plot($("#placeholder"), seriesdata, {
        series: {
     trendline: {
        show:true,
        lineWidth:2,
        fill:true,
        fillColor:false,
        steps:true
    },
    ...
});

我在图表中没有得到趋势线.

I'm not getting trend line in the chart.

推荐答案

该插件是不行的.它需要对浮点源进行修改才能起作用，我认为这做得还不是很好.最简单的方法是自己添加趋势线作为其他系列.数学并不难...

That plugin is a no-go. It requires modifications to the flot source to work and in my opinion isn't very well done. The simpliest approach would be to just add the trendline yourself as an additional series. The math is not difficult...

  // calc slope and intercept
  // then use resulting y = mx + b to create trendline
  lineFit = function(points){
    sI = slopeAndIntercept(points);
    if (sI){
      // we have slope/intercept, get points on fit line
      var N = points.length;
      var rV = [];
      rV.push([points[0][0], sI.slope * points[0][0] + sI.intercept]);
      rV.push([points[N-1][0], sI.slope * points[N-1][0] + sI.intercept]);
      return rV;
    }
    return [];
  }

  // simple linear regression
  slopeAndIntercept = function(points){
    var rV = {},
        N = points.length,
        sumX = 0, 
        sumY = 0,
        sumXx = 0,
        sumYy = 0,
        sumXy = 0;

    // can't fit with 0 or 1 point
    if (N < 2){
      return rV;
    }    

    for (var i = 0; i < N; i++){
      var x = points[i][0],
          y = points[i][1];
      sumX += x;
      sumY += y;
      sumXx += (x*x);
      sumYy += (y*y);
      sumXy += (x*y);
    }

    // calc slope and intercept
    rV['slope'] = ((N * sumXy) - (sumX * sumY)) / (N * sumXx - (sumX*sumX));
    rV['intercept'] = (sumY - rV['slope'] * sumX) / N;
    rV['rSquared'] = Math.abs((rV['slope'] * (sumXy - (sumX * sumY) / N)) / (sumYy - ((sumY * sumY) / N)));

    return rV;
  }

然后您可以将其称为:

  lineFitSeries = lineFit(someSeries);

然后将lineFitSeries作为另一个系列添加到float ...

And add the lineFitSeries as another series to flot...

这是一个有效的示例.

这篇关于FLOT中的趋势线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！