程序员经验分享-hwhale

FLOT 趋势线

2023-11-29

包括我jquery.flot.trendline.js. 从这里

这是我的代码

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

我没有在图表中看到趋势线。


那个插件是不行的。它需要修改 flot 源才能工作，在我看来做得不是很好。最简单的方法是自己添加趋势线作为附加系列。数学并不难...

  // 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 添加为另一个浮动系列...

这是一个工作example:

$(function() {
  
  lineFit = function(points){
    sI = slopeAndIntercept(points);
    if (sI){
      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 [];
  }
  
  slopeAndIntercept = function(points){
    var rV = {},
        N = points.length,
        sumX = 0, 
        sumY = 0,
        sumXx = 0,
        sumYy = 0,
        sumXy = 0;
    
    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);
    }
    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;
  }
  

  var d1 = [];
  for (var i = 0; i < 14; i += 0.5) {
    d1.push([i,  i**2]);
  }
  
  d2 = lineFit(d1);
  console.log(d2);
  
  var plot = $.plot("#placeholder", [{
        data: d1,
        points: {
          show: true
        },
        lines: {
          show: true
        }
    },
    {
      data: d2,
      lines:{
        show: true
      }
    }
    ], {
      grid: {
        hoverable: true,
        clickable: true
      },
      //series: {
       trendline: {
          show:true,
          lineWidth:2,
          fill:true,
          fillColor:false,
          steps:true
        }
      //}
    }
  );
});
<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script data-require="[email protected]" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
     <div id="placeholder" style="width:400px; height: 400px;"></div>
  </body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

flot

FLOT 趋势线 的相关文章

  • 如何配置 flot 以在 y 轴零点处绘制缺失的时间序列？

    我正在使用浮点 github上的浮动 用以下时间序列数据绘制图表 1357171200000 1 1357344000000 1 1357430400000 2 1357516800000 2 1357689600000 3 1357776

  • FLOT 趋势线

    包括我jquery flot trendline js 从这里 这是我的代码 plot placeholder seriesdata series trendline show true lineWidth 2 fill true fill

  • 浮点图 - 打开/关闭系列

    我成功地建立了我的流程图 基于上一篇文章 我想让查看者通过单击即可显示 隐藏该系列 我找到了很多解决方案 包括官方的和其他的 但没有一个对我有用 我会解释一下 官方开启 关闭系列 这有效 但看起来非常混乱 因为图例最终被复制了两次 一旦系列

  • 未捕获绘图尺寸无效，图表 api 的宽度 = null，高度 = null

    我正在使用流程图 API 来显示图表 并且成功绘制了数据 我在一页中加载大约 30 个图表 并在 ui tabs 中渲染它们 所有图表都完美渲染 页面工作正常 但我仍然收到此错误 我对所有图表使用了不同的 div id 为所有 div 指定

  • jQuery float bar 数字：数字定位

    我在用着jquery flot barnumbers js的插件jQuery 的 Javascript 绘图 图表 库在栏上显示数字 My code plot placeholderByDay data DataOne label Tota

  • 使用 Flot API 绘制多个条形图 [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 您好 我正在使用 FLOT 图表 API 在我的应用程序中以条形图的形式显示数据 我需要在条形图中显示数据 并在包含前数据和后数据的类别中显示数据 如图所示 示例图 请告诉我如何

  • 如何在 Flot 饼图中显示小值

    我有简单的数据 label Test 1 data 1332 label Test 2 data 56187 label Test 3 data 2 label Test 4 data 2 label Test 5 data 42946 l

  • 使用 FLOT 图表更改悬停时条形的颜色

    是否可以使用 Flot 水平条形图更改悬停时条形的颜色 这通过设置 highlightColor 字段对我有用 plot placeholder data series bars show true align center barWidt

  • flot.js - 位置垂直刻度，但被切断并居中

    我使用 flot js 绘制 x 轴上带有时间戳的图表 由于我在这些图表上会有很多刻度 所以我垂直旋转它们 这样它们就不会重叠 这工作正常 但标签集中在刻度上 并且没有提供足够的空间 因此它们被切断 我没有使用ticrotor插件滴答声 h

  • Flot：如何在条形图中设置数字样式？

    我在用着流程图 http www flotcharts org 它是插件Flot barnumbers Demo http joetsoi github io flot barnumbers 显示图表 我需要在栏中显示数字 它可以工作 不幸

  • 有浮动工具提示的 Flot 示例吗？

    我目前正在研究一个Flot http code google com p flot 图形 即API http flot googlecode com svn trunk API txt尽管高级使用的示例没有得到广泛记录 但总体而言似乎非常强

  • 如何使用flot js绘制按类别分组的多个条形图

    我正在使用 flot 库来显示条形图 我需要以这种方式按特定值进行分组

  • 将流程图保存为图像或 pdf

    我正在尝试将流程图保存为图像并最终保存为 pdf 但不太清楚如何保存 网上我看到我可以做 canvas toDataURL image png 但问题是我首先如何获取画布 示例说要使用 document getElementById can

  • 如何在 Web 应用程序中控制 iPhone 的屏幕方向

    我有一个非常基本的网页 它使用 flot 来创建canvas基于图 类似于 SO 用于声誉图的图 对于 PC 显示器 它应该正常输出 宽度 x 轴 为高度的 1 6 倍 但对于 iPhone 我希望页面默认为横向 而不是让它以 纵向 方向溢

  • 如何使 JsonResult 返回数组数组（不带字段名）而不是对象数组？

    我有一个日期 值对的 IEnumerable 列表 我将其作为 Json 列表返回以进行浮动 但是 当我调用 JsonResult 时 结果如下所示 Date date1 Value value1 Date date2 Value valu

  • JQuery、Flot、值标签、中心

    是否可以将值标签放置在条形上 使它们位于条形的中心 如果我设置栏align center 条形上的标签偏离且不居中

  • 隐藏选项卡内的绘图尺寸无效，宽度 = 0，高度 = 400

    当我在隐藏选项卡 如第二个 第三个等 中插入图表时 出现此错误 这是错误 Invalid dimensions for plot width 0 height 400 in js jquery flot min js 6 我使用了 boot

  • 使用 Flot、html、PHP 和 MySql 查询绘制多个图表

    我正在尝试使用 Flot html PHP 和 MySql 查询绘制多个图表 但我陷入了困境 因为我找不到在同一个 html 页面中绘制多个 flot 的方法 为简单起见 在数据库 test db3 映像中包含以下字段 表1 用户名 发送邮

  • Flot 0.8.2 折线图 - 颜色错误

    我正在使用 Flot 折线图并设置它们的颜色 我发现了一个奇怪的错误 在前 3 种颜色之后 绘图对所有其他线条使用最后一种颜色 这不是正确的行为 更有趣的是图例显示了正确的颜色 这是一个已知的错误 var dataSet label d1

  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011

随机推荐

  • 在 TestNG 中依次运行测试方法

    我正在使用 Eclipse Selenium WebDriver TestNG 这是我的班级结构 class1 test invocation count 4 method1 test invocation count 4 method2

  • 使用 Ipython 退出脚本时不调用 atexit 函数

    下面是在 test atexit py 脚本中编写的代码 def exit function print I am in exit function import atexit atexit register exit function p

  • 便携式 C SWAP 宏，不需要“type”参数，也不使用 memcpy

    采用某种类型的交换宏是众所周知的 define SWAP type a b do type SWAP a a b b SWAP a a b b SWAP while 0 also 宏 SWAP t x y 交换两个类型 t 的参数 是否可以

  • 如何检查电话号码是否是 Android 中有效的 Whatsapp 号码？

    所以我有一个编辑文本 将用作从用户获取电话号码的视图 假设电话号码是 6123456789 我想检查这个号码是否有whatsapp号码 我想避免用户输入假的whatsapp号码 怎么办 更新 2022 年 11 月 Whatsapp 从 v

  • 线程有多贵？

    操作系统本机线程有多贵 主机操作系统为线程堆栈分配一些虚拟内存 并为线程控制结构分配一点内核内存 我错过了什么吗 它会增加调度程序的工作负载 具体取决于线程的繁忙程度以及调度程序的类型 它还将为堆栈的第一页分配物理内存 在许多情况下 主要成

  • 是否存在从 HTML 属性名称到 DOM 属性名称的映射？

    in HTML td style background color pink hello world td 但在 Javascript DOM 中 var td document createElement td td colSpan 3

  • 如何从接口访问嵌套的可选索引

    鉴于以下接口描述这个TS游乐场 export type GetTestimonialsSectionQuery typename Query testimonialsSection typename TestimonialsSection

  • 无法实例化类...；没有空构造函数

    当我运行我的PaintView java 我在 logcat 中收到以下错误 即无法实例化类com example connectthedots PaintView 没有空的构造函数 07 22 18 47 43 453 D dalvikv

  • 无法关闭 Tomcat web 应用程序中的 Neo4j Jetty 服务器

    目前我正在开发一个使用 Neo4j 的网络应用程序 我们的应用需要部署在Tomcat环境中 客户要求 我们决定嵌入 Neo4j 因为这样我们就可以使用 Neo4j 提供的 Java API 更容易部署 并且性能得到提高 但是 我们还需要访问

  • Android：闹钟每 30 分钟播放一次，从 12:30 开始

    这里我将使用闹钟服务每 30 分钟播放一次闹钟 现在我已将其设置为从 Every start 开始每 10 秒播放一次 这是代码 Override public void onCreate Bundle savedInstanceState

  • 将非常大的 JSON 文件转换为 CSV

    我有一个大小约为 8GB 的 JSON 文件 当我尝试使用此脚本转换文件时 import csv import json infile open filename json r outfile open data csv w writer

  • 如何在 php 中创建安全的 mysql 准备语句？

    我是在 mysql 和 php 中使用准备好的语句的新手 我需要一些帮助来创建准备好的语句来检索列 我需要从不同的列获取信息 目前对于测试文件 我使用完全不安全SQL语句 qry SELECT FROM mytable where user

  • 有什么方法可以使用给定的索引节点号搜索文件或文件名吗？

    我正在从用户那里获取索引节点号 并且必须在文件系统中搜索该文件 如何搜索 inode 编号 我必须使用 C 和 unix 来完成此操作 到目前为止 这是我的代码 include

  • 链接命名范围未按预期工作

    我有两个简单的命名范围定义如下 class Numbers lt ActiveRecord Base named scope even conditions gt title gt 2 4 6 named scope odd conditi

  • 通过 grep 两次管道尾部输出

    使用典型的 Apache 访问日志 您可以运行 tail f access log grep 127 0 0 1 它只会显示指定 IP 地址的日志 创建时 但是为什么当你通过管道传输时会失败grep第二次 进一步限制结果 例如 css 的简

  • 移动平均查询 MS Access

    我正在尝试计算数据的移动平均值 我用谷歌搜索并在这个网站和其他网站上找到了很多例子 但我仍然感到困惑 我需要计算为特定产品选择的记录的前 5 个流量的平均值 我的表如下所示 TMDT Prod Flow 8 21 2017 12 01 00

  • 使用图像模块（python）将希伯来语文本绘制为图像

    这是我已经问过的一个问题 并且有几个得到了答案 但问题仍然存在 当我尝试使用图像模块用希伯来语写入图像时 我得到的不是希伯来语字母而是其他 ascii 字母 如果我转换为 unicode 或 ascii 我会收到一个它不支持的错误 我在这里

  • Windows TCP 套接字默认启用 SO_KEEPALIVE 吗？

    我在 TCP 套接字方面遇到了一个奇怪的错误 看起来SO KEEPALIVE默认情况下在所有套接字上启用 我编写了一个简短的测试用例来创建套接字并连接到服务器 连接后 我立即检查SO KEEPALIVE with getsockopt 该值

  • 转换元组类型

    所以我是提升 MPL 的新手 我不知道如何将它与标准类型一起使用 我想要一个隐藏这种类型的元函数 std tuple

  • FLOT 趋势线

    包括我jquery flot trendline js 从这里 这是我的代码 plot placeholder seriesdata series trendline show true lineWidth 2 fill true fill

热门标签