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

2023-11-22

我正在使用浮点(github上的浮动)用以下时间序列数据绘制图表:

[
    [1357171200000, 1],
    [1357344000000, 1],
    [1357430400000, 2],
    [1357516800000, 2],
    [1357689600000, 3],
    [1357776000000, 1]
]

正如您所看到的,图表中的一些点显示了给定日期的销售额。 我的 json 响应不包含未发生销售的日子的销售计数/数据。 例如 1 月 4 日。我如何配置 flot 以在 y 轴零点处绘制缺失的天数(因为没有销售)?正如您在图像中看到的那样,flot 确实连接了这些点,因此图中没有零点。

Graph


这是一个创建新数组的解决方案,添加缺失的天数并将其值设置为零:

/* create and return new array padding missing days*/
function newDataArray(data) {
  var startDay = data[0][0],
    newData = [data[0]];

  for (i = 1; i < data.length; i++) {
    var diff = dateDiff(data[i - 1][0], data[i][0]);
    var startDate = new Date(data[i - 1][0]);
    if (diff > 1) {
      for (j = 0; j < diff - 1; j++) {
        var fillDate = new Date(startDate).setDate(startDate.getDate() + (j + 1));
          newData.push([fillDate, 0]);
      }
    }
    newData.push(data[i]);
  }
  return newData;
}


/* helper function to find date differences*/
function dateDiff(d1, d2) {
  return Math.floor((d2 - d1) / (1000 * 60 * 60 * 24));
}

To use:

var data = [
  [1357171200000, 1],
  [1357344000000, 1],
  [1357430400000, 2],
  [1357516800000, 2],
  [1357689600000, 3],
  [1357776000000, 1]
];

var newData=newDataArray(data);
/* pass newData to flot*/

DEMO: http://jsfiddle.net/LK2gD/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何配置 flot 以在 y 轴零点处绘制缺失的时间序列? 的相关文章

  • React Native 无法访问 Cloud Firestore 后端

    我之前使用的是 firebase 实时数据库 但现在想切换到 Cloud Firestore 但即使经过身份验证 也会收到以下错误 我目前正在使用 Android Simulator 尝试禁用我的实时数据库 但找不到解决方案 Firebas
  • 用更好的模式替换开关(Javascript)

    我必须升级我的应用程序以根据用户类型和角色属性显示页面 目前 我使用一个简单的 switch 语句来根据用户类型来执行此操作 例如 switch type case a return CONSTANT ONE case b return C
  • 使用 babel env 预设时,展开运算符出现语法错误

    我正在努力 现代化 meern io 入门样板 https github com Hashnode mern starter通过替换巴别塔es2015 and stage 0预设为env 然而 似乎env预设无法识别以下片段client m
  • 如何使用 Nextjs/React 将 JSON 对象导出到 Excel?

    我有一个检索 json 对象的端点 如下所示 data id 1 temaIndicador Indian codigo 001 observaciones Interactions Specialist tertiary Regional
  • 指定 HTML5 输入类型 = 日期的值输出?

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d
  • 插件 gulp-babel 错误:插件/预设文件不允许导出对象,只能导出函数

    我现在尝试在我的 Ionic v1 应用程序中使用 JavaScript 2015 ES6 包 json name test version 1 0 0 dependencies ionic native deeplinks 4 18 0
  • 如何在单击按钮时清除反应挂钩中的间隔

    我正在用反应钩子构建一个简单的计时器 我有两个按钮启动和重置 当我单击开始按钮时 handleStart 函数工作正常 计时器启动 但我不知道如何在单击重置按钮时重置计时器 这是我的代码 const App gt const timer s
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环?

    努力思考最好的解决办法 我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
  • 为什么浏览器允许onmousedown JS改变href?

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo
  • 当rest api应用程序服务器(express)和Angulars js应用程序在不同端口上运行时出现Cors问题

    我有用node js编写的rest api应用程序 express在端口3000上运行 而angularjs应用程序在同一服务器上的端口9001上运行 从 angularjs 应用程序调用 rst api 时 出现了 cors 问题 在re
  • 从浏览器访问本地文件?

    您好 我想从浏览器访问系统的本地文件 由于涉及大量安全检查 是否可以通过某种方式实现这一目标 或使用 ActiveX 或 Java Applet 的任何其他工作环境 请帮帮我 要通过浏览器访问本地文件 您可以使用签名的 Java Apple
  • 使用 jQuery 从 ASP.Net JSON 服务获取数据

    我正在尝试调用 Google 地图地理编码 API 从纬度 经度对中获取格式化的地址 然后将其记录到控制台 我正在尝试获取为给定位置返回的第一个 formatted address 项目 我很简单无法从 JSON 中提取该项目 我不知道为什
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • 有序 JSON 对象

    我有一个 servlet 它与数据库通信 然后返回有序 按时间排序 对象的列表 在servlet部分 我有 access DB returns a list of User objects ordered ArrayList users M
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att

随机推荐

  • 在 Firefox 中使用小数计算宽度,但在 Webkit 中没有小数

    我在不同浏览器中使用 HTML CSS 时遇到一个奇怪的问题 Firefox 3 6 和 Webkit 浏览器 Chrome 和 Safari 我的 HTML 看起来像这样 div class ln letters a href class
  • 优化的 strcmp 实现

    发现这个函数here 这是一个实现strcmp int strcmp const char s1 const char s2 while s1 s1 s2 s1 s2 return const unsigned char s1 const
  • -[NSInputStream read:maxLength:] 抛出一个异常,说长度太大,但事实并非如此

    我用一个NSInputStream从文件中读取数据 如果它会崩溃maxLength大于 49152 当它崩溃时 有时 但不是每次 它都会给出以下消息 由于未捕获的异常 NSInvalidArgumentException 而终止应用程序 原
  • QFile::copy() 的进度条?

    我正在制作一个在 Qt 中复制文件的程序 我想知道我该如何使用QProgressBar with bool QFile copy const QString fileName const QString newName 这是否有可能copy
  • AS3 - 我可以使用 addEventListener 检测变量值的变化吗?

    是否可以使用 EventListener 监听变量并检测该变量的值何时发生变化 谢谢 如果你把它全部封装到一个类中 这很容易做到 我们将使用 getter setter 方法 setter 方法将在每次调用时调度和事件 注意 Setter
  • 无法计算 XPath 中的表达式

    我使用 XPath 来解析 URL 返回的 XML 文档 当我使用给定的输入运行代码时 它可以工作 但是当将输入作为用户输入提供时 它会抛出异常 代码 class private String generalQuery method Sys
  • 同一代码库具有不同名称的多个应用程序

    读了这篇文章 想到了同样的问题 Android 上的一个代码库 两个应用程序 我已经创建了一个应用程序testApp有类似的项目topics splash screens logos charts rules statuses and or
  • $.ajax 忽略 DELETE 请求的数据参数

    我刚刚从 jQuery 1 3 2 更新到 1 4 3 并且在发出 AJAX DELETE 请求时看到了一些新行为 由于某种原因 在我的中传递的数据data参数未发送到服务器 例如 ajax url example data id 12 t
  • 什么是 XMPP?如何在 iOS 聊天应用程序中使用它?

    我想为 iPhone 创建一个聊天客户端应用程序 我读到 XMPP 框架是最适合用于此目的的框架之一 然而 我还没有找到太多这方面的材料 只有 Google Code 上的 XMPPFramework 以及 wiki 上的详细信息 谁能解释
  • 在某些条件下随机播放列表

    我有一个可以轻松比较的元素列表Equals 我必须对列表进行洗牌 但洗牌必须满足一个条件 第 i 个元素shuffledList i 不得等于以下位置的元素i 1也不是元素i 2 该清单应被视为循环 也就是说 列表中的最后一个元素后面跟着第
  • grep 查找包含“\t”的行

    我被要求制作一个 shell 脚本来检查文件中的简单错误 我想找到 对于每一行 如果 正则表达式 t 曾经发生过 问题是 grep 忽略了 并将 t 作为文字 我还尝试将字符本身写入文件并要求 grep 读取它 但它不起作用 有没有办法使用
  • iPhone 操作系统:如何以编程方式区分 iPad 3G 和 iPad Wi-Fi?

    iPhone OS 中是否有任何属性或其他机制可以在运行时检查应用程序是否在 iPad 3G 或 iPad Wi Fi 上运行 似乎 UIDevice 类没有提供类似的东西 我的应用程序广泛使用互联网访问 我想明确警告用户 在 3G 上可能
  • Fragment onCreateView 和 onActivityCreated 调用两次

    我正在使用 Android 4 0 ICS 和片段开发一个应用程序 请考虑 ICS 4 0 3 API 级别 15 API 演示示例应用程序中的修改示例 public class FragmentTabs extends Activity
  • 带有 SVG 颜色渐变的圆形进度指示器?

    我需要制作一个带有颜色渐变的圆形进度指示器 我还需要将进度圈的 末端 弄圆 这张图片包含了我想要实现的一切 此代码很接近 但没有颜色渐变 https codepen io adsfdsfhdsafkhdsafjkdhafskjds pen
  • 将变量从容器开始传递到文件

    我在 Dockerfile 中有以下几行 我想在应用程序最后启动之前将配置文件中的值设置为默认值 并提供可选的使用 e启动容器时的选项 我正在尝试使用 Docker 来做到这一点ENV突击队 ENV CONFIG VALUE default
  • 我使用的是哪个版本的 Kohana?

    Kohana框架中哪里可以找到版本信息 我在教程中看到的所有内容都与我在应用程序中看到的内容相反 我认为这是一个版本问题 因为文档和我的安装之间的方法和调用略有不同 至少对于 gt 3 0 的版本 Kohana 的版本号位于system c
  • Applescript 右键单击​​文件

    苹果脚本中是否有一个命令可以右键单击文件并调出上下文菜单 我正在寻找类似的东西 tell application Finder set theDesktopItems to every item of desktop right click
  • 如何逃脱液体模板标签?

    这听起来很简单 但是我在文档中找不到它 我怎样才能写 this in a liquid模板 未经引擎处理 可以使用以下命令禁用液体处理引擎raw tag raw this endraw 将显示 this
  • 将 Node.js 应用程序(托管在 GAE 上)的 IP 列入白名单以访问 MongoDB Atlas(托管在 GCP 上)

    我希望我的后端服务器 Node js 托管在 Google App Engine 上 灵活的环境 如果重要的话 能够从我的数据库 MongoDB 通过 Atlas 也托管在同一区域的 Google Cloud 平台上 获取和传递数据作为我的
  • 如何配置 flot 以在 y 轴零点处绘制缺失的时间序列?

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