【问题标题】:How to properly set datetime as x-axis value on Highcharts(React JS)如何在 Highcharts(React JS)上正确地将日期时间设置为 x 轴值
【发布时间】:2021-06-03 10:30:44
【问题描述】:

我正在尝试使用 DateTime 和数字制作图表; xAxis 是 DateTime,yAxis 是数字值。当我布局数据时,我注意到每次 x 轴的值都是这样的:

since I don't intend to make this post with a long code, please click this

series: [{
  data: [
      {x: new Date("2021-05-27T01:15Z"), y: 102},
      {x: new Date("2021-05-26T06:20Z"), y: 603},
      {x: new Date("2021-05-26T06:19Z"), y: 200},
      {x: new Date("2021-05-26T06:18Z"), y: 100},
      {x: new Date("2021-05-26T06:17Z"), y: 120},
      {x: new Date("2021-05-26T24:00Z"), y: 203}
  ],  
}]

}
// THIS CODE THROWS ReferenceError: Highcharts is not defined

我尝试了一种不同的方法,而是在 new Date() 中输入毫秒数:

 series: [{
    
      // number of articles published example
      //data:[1,2,3]
      data: [
          {x: new Date(1622078100000), y: 102},
          {x: new Date(1622010000000), y: 603},
          {x: new Date(1622009940000), y: 200},
          {x: new Date(1622009880000), y: 100},
          {x: new Date(1622009820000), y: 120},
          {x: new Date(1622073600000), y: 203}
      ],
      // pointInterval: 3600000,    
    }]


// THIS CODE ALSO THROWS ReferenceError: Highcharts is not defined

请注意,我尝试使用它来查找错误原因并最终得到以下数据:

  data: [
          {x: new Date(16220), y: 102},
          {x: new Date(16220), y: 603},
          {x: new Date(16240), y: 200},
]
    


 //this code doesn't throw an error, but of course, the date is wrong and if I try to add 
//more object into the array, then the error message return

任何人都知道如何正确设置 Highcharts 的 dateTime 以使其不会引发错误?感谢您的帮助

错误信息:

【问题讨论】:

标签: reactjs highcharts


【解决方案1】:

Refer http://jsfiddle.net/Jainskumar7/0hndm6ja/ 在 yAxis 上具有相同的 dateTime

series: [{
data: [[1621366784000,54],[1621368584000,55],[1621370384000,55],[1621372184000,56],[1621373984000,56],[1621375784000,56],[1621377583000,57],[1621379383000,57],[1621381183000,58],[1621382983000,59],[1621384783000,59],[1621386583000,60],[1621388383000,60],[1621390183000,60],[1621391983000,60],[1621393783000,60],[1621395583000,60],[1621397383000,59],[1621399183000,59],[1621400983000,59],[1621404583000,60],[1621406383000,60],[1621408183000,60],[1621409983000,59],[1621411783000,59],[1621413583000,58],[1621415383000,59],[1621417183000,59],[1621418983000,59],[1621420783000,58],[1621422583000,58],[1621424383000,58],[1621426183000,58],[1621427983000,58],[1621429782000,58],[1621431582000,58],[1621433382000,58],[1621435182000,58],[1621436982000,58],[1621438782000,58],[1621440582000,58],[1621442382000,58],[1621444182000,57],[1621595378000,49],[1621597178000,49],[1621598978000,49],[1621600778000,49],[1621602577000,48],[1621604377000,48],[1621606177000,47],[1621607977000,47],[1621705175000,52],[1621706975000,52],[1621708775000,52],[1621710575000,52],[1621712375000,52],[1621714175000,52],[1621715975000,52],[1621717774000,52],[1621719574000,52],[1621721375000,52],[1621723175000,52],[1621724975000,52],[1621726775000,52],[1621728575000,52],[1621730375000,51],[1621732175000,50],[1621733975000,50],[1621735775000,50],[1621737575000,50],[1621739375000,50],[1621741175000,50],[1621742975000,50],[1621744775000,50],[1621746574000,51],[1621748374000,51],[1621750174000,51],[1621751974000,51],[1621753774000,51],[1621755574000,51],[1621757374000,51],[1621759174000,51],[1621760974000,51],[1621762774000,52],[1621764574000,52],[1621924771000,44],[1621926571000,44],[1621928371000,43],[1621930171000,43]]

}]

【讨论】:

  • 您是如何转换时间的?我有 ISO 日期“2021-02-09T12:46:43.055Z”,我将其转换为:new Date(“2021-02-09T12:46:43.055Z”).getTime(),因此会产生毫秒。但是当我使用它时,我仍然收到错误消息。但是,我使用了您的数据,它与图表完美配合。所以我认为我在将 ISO 日期转换为毫秒时做错了
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多