C3.js - 如何从InfluxDB绘制时间序列时指定时间戳格式 [英] C3.js - How to specify the timestamp format when plotting timeseries taken from InfluxDB

问题描述

influxDB timestamps看起来像这样：

• 2015-01-29T21：55：43.702900257Z
  
  

  问题是我应该为 x轴使用什么选项当我用C3.js生成图表时

  
  
  

  我得到的错误：
  
  lockquote
  

  无法解析x'2015-01-29T21：55：43.702900257Z'至日期对象

  
  

  也许这个 jsfiddle 会帮助你做一些快速测试...我认为问题是与时间格式，但欢迎任何其他建议︰
  
  

   轴：{
  x：{
  类型： 'timeseries'，
   tick：{
   format：'％Y-％m-％d'
  } 
  } 
  } 
    xFormat       >因为 @ das Keks 说这里 a>： 
   
   
   
   
   轴对象中的格式只是定义日期的显示方式。 如果要指定日期解析的格式，则必须在数据对象中使用xFormat 。 
   
   
   
   
   
    data：{
  x：'x'，
   xFormat：'％Y-％m-％dT％H：％M：％S 。％LZ'，
  列：[
   ['x'，...]，
   ['data1'，...] 
  ] 
  } 
    
  对于 xFormat选项请参阅D3.js / 时间格式 
   
   
    Date（）），然后通过使用 dateObj.toISOString（）。例如，打开你的控制台并试试这个： 
   
   
   > new Date（'2015-09-30T12：21：41.447494312Z'）。toISOString（）; 
  >2015-09-30T12：21：41.447Z
    
   
  influxDB timestamps look like this:
  
  
  2015-01-29T21:55:43.702900257Z
  
  
  The question is what options should I use for the x-axis when I generate the graph with C3.js
  
  The error I get:
  
    
  "Failed to parse x '2015-01-29T21:55:43.702900257Z' to Date object"
  Maybe this jsfiddle will help you do some quick tests... I think the problem is with the time format but any other suggestions are welcome:
  axis: {
      x: {
          type: 'timeseries',
          tick: {
              format: '%Y-%m-%d'
          }
      }
  }
  
  解决方案
  First, I had to add xFormat because as @das Keks says here:
  
    
  "The format in the axis Object just defines how the date will be displayed. If you want to specify the format for the date parsing you have to use xFormat in the data object."
  
  
  data: {
      x: 'x',
      xFormat: '%Y-%m-%dT%H:%M:%S.%LZ',
      columns: [
          ['x', ... ],
          ['data1', ... ]
      ]
  }
  For the xFormat options see D3.js / Time Formatting
  
  
  Second, to get to the right format, I changed every timestamp by first creating a Date object with Date() and then by using dateObj.toISOString(). For example, open your console and try this:
  > new Date('2015-09-30T12:21:41.447494312Z').toISOString();
  > "2015-09-30T12:21:41.447Z"
  
  
                          
  这篇关于C3.js  - 如何从InfluxDB绘制时间序列时指定时间戳格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！