热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

时间序列流,删除x轴上的am/pm和24小时格式

如何解决《时间序列流,删除x轴上的am/pm和24小时格式》经验,是哪儿的问题?

我正在尝试以秒精度绘制时间序列,格式为HH:mm:ss(24小时/天),如一下js docs中所述。

问题是我声明的格式没有得到遵守,我尝试了Chartsjs文档中的几种组合,但没有一种有效。

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mixins: [VueChartJs.mixins.reactiveProp],
  props: ['chartData', 'timeFormat'],
  data() {
    return {
      options: {
        animation: false,
        scales: {
          xAxes: [{
            type: 'time',
            distribution: 'series',
            time: {
            	format: this.timeFormat
            }
          }],
        },
      }
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options);
  }
})

var vm = new Vue({
  el: '.app',
  data() {
    return {
      chart: {},
      timeFormat: 'HH:mm:ss',
      timeout: null,
      len_data: 20
    }
  },
  created () {
    this.change_data();
  },
  methods: {
    change_data: function() {
      this.chart = this.fillData();
      this.timeout = setTimeout(this.change_data, 1000);
    },
    fillData () {
      return {
          labels: this.get_labels(),
          datasets: [{
            fill: false, // line
            pointRadius: 2, // line
            borderWidth: 2, // line
            borderColor: "rgba(25, 25, 125, 1)",
            data: this.get_nums(0),
            label: "Points"
          }]
        }
    },
    get_labels()  {
    	return Array.from({length: this.len_data}, (v, k) => this.newDateString(this.len_data-k)); 
    },
    get_nums(data_idx) {
      if(typeof this.chart.datasets !== 'undefined') {
      	this.chart.datasets[data_idx].data.shift(); // removing the first item
        this.chart.datasets[data_idx].data.push(this.getRandomInt()); // adding a new one
       	return this.chart.datasets[data_idx].data;
      }
      return Array.from({length: this.len_data}, (v, k) => this.getRandomInt());
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    },
    newDateString(seconds) {
      return moment().subtract(seconds, 's').format(this.timeFormat);
    }
  }
})





{{chart.datasets[0].data}}

我想我快要到了,我敢打赌我只是缺少了一些细节。
JSFIDDLE:https://jsfiddle.net/ue1x8079/


推荐阅读
  • 在稀疏直接法视觉里程计中,通过优化特征点并采用基于光度误差最小化的灰度图像线性插值技术,提高了定位精度。该方法通过对空间点的非齐次和齐次表示进行处理,利用RGB-D传感器获取的3D坐标信息,在两帧图像之间实现精确匹配,有效减少了光度误差,提升了系统的鲁棒性和稳定性。 ... [详细]
  • 本文介绍了一种专为清洁工人设计的自定义文本烟花效果。通过该功能,用户可以输入特定的感谢或祝福语句,系统将生成绚丽的烟花动画,以表达对清洁工人的敬意和感激之情。该特效不仅美观,还能增强用户的互动体验,提升公共场合的氛围。 ... [详细]
  • 本文探讨了使用JavaScript实现多种经典排序算法的高效方法,包括冒泡排序、选择排序、插入排序、归并排序和快速排序。为了确保代码的结构清晰和可维护性,我们首先定义了一个 `ArrayList` 类,该类中包含了待排序的数组声明。通过这种方式,我们不仅能够更好地组织代码,还能提高算法的执行效率和可读性。此外,我们还对每种排序算法进行了详细的性能分析和优化建议,以帮助开发者在实际应用中选择最合适的排序方法。 ... [详细]
  • 在百度广告中实现JavaScript代码的有效触发,特别是在滚动加载场景下,存在一定的技术挑战。通常情况下,百度广告的代码在页面完全加载后调用可能会导致显示异常或功能失效。针对这一问题,可以尝试使用事件监听器来动态检测滚动位置,并在合适的时机手动调用广告加载函数。此外,确保广告代码与页面其他脚本兼容也是关键。建议参考官方文档或社区案例,以获取更多具体的解决方案和技术支持。 ... [详细]
  • 使用PyQt5与OpenCV实现电脑摄像头的图像捕捉功能
    本文介绍了如何使用Python中的PyQt5和OpenCV库来实现电脑摄像头的图像捕捉功能。通过结合这两个强大的工具,用户可以轻松地打开摄像头并进行实时图像采集和处理。代码示例展示了如何初始化摄像头、捕获图像并将其显示在PyQt5的图形界面中。此外,还提供了详细的步骤说明和代码注释,帮助开发者快速上手并实现相关功能。 ... [详细]
  • Python 并发编程进阶:从初学者到高手的进程与模块开发指南
    Python 并发编程进阶:从初学者到高手的进程与模块开发指南 ... [详细]
  • 在Matlab中,我尝试构建了一个神经网络模型,用于预测函数 y = x^2。为此,我设计并实现了一个拟合神经网络,并对其进行了详细的仿真和验证。通过调整网络结构和参数,成功实现了对目标函数的准确估计。此外,还对模型的性能进行了全面评估,确保其在不同输入条件下的稳定性和可靠性。 ... [详细]
  • 我正致力于利用Azure Functions和System.IO.Compression库,将大量文件高效地压缩并存储到Azure Blob容器中。这种方法不仅提高了存储效率,还优化了数据管理流程。通过这种方式,可以显著减少存储成本,并提升数据访问速度。 ... [详细]
  • 本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ... [详细]
  • 在Java中,匿名函数作为一种无名的函数结构,无法独立调用;而在JavaScript中,不仅有类似的匿名函数,还有立即执行函数(IIFE)和闭包等高级特性。立即执行函数同样基于匿名函数实现,但会在定义时立即执行,而闭包则通过嵌套函数来捕获外部变量,实现数据封装和持久化。这些不同的函数形式在实际开发中各有应用场景,理解其特点有助于更好地利用语言特性进行编程。 ... [详细]
  • 深入解析 Vue.js 的设计与实现:第三章详解
    在《深入解析 Vue.js 的设计与实现》第三章中,详细探讨了 Vue.js 渲染器与虚拟 DOM 的机制。通过 JavaScript 对象来模拟实际的 DOM 结构,例如,`const vNode = { tag: 'div', props: { ... } }`,这种方式不仅提高了性能,还增强了组件的可维护性和灵活性。本章进一步分析了虚拟 DOM 的创建、更新及优化策略,为开发者提供了深入了解 Vue.js 内核工作的视角。 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 在探讨 AS3 中的数据深度复制技术时,本文详细介绍了实现数据深度克隆的有效方法。通过对比多种方案,最终确定了一种高效且可靠的实现方式,所有代码均来源于公开资源,确保了方法的实用性和可操作性。 ... [详细]
  • 开发心得:利用 Redis 构建分布式系统的轻量级协调机制
    开发心得:利用 Redis 构建分布式系统的轻量级协调机制 ... [详细]
  • AngularJS uirouter模块下的状态管理机制深入解析
    本文深入探讨了 AngularJS 中 ui-router 模块的状态管理机制。通过详细分析状态配置、状态转换和嵌套状态等核心概念,结合实际案例,帮助开发者更好地理解和应用这一强大工具,提升单页面应用的开发效率和用户体验。 ... [详细]
author-avatar
企鹅田先生
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有