首页 > 解决方案 > Armchart 不显示缩放线

问题描述

我正在使用带有反应的 amcharts。

当我在我的数据上使用标准日期值图表时,我在缩放时看不到这条线。

这是工作示例:

//Example of data where it works
[{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "value2": 362,
  "value3": 699
}

https://codepen.io/team/amcharts/pen/OdZygY

然后以我的自定义数据为例:

//Example of custom data where it doesn't work  
[{"highDate":"2020-01-22T21:00:00.000Z","highValue":"74.1300"}...

https://codepen.io/svv2014/pen/WNbPpRd

在第一个示例中,缩放正常工作,而在第二个示例中,我的数据无法正常工作。

有什么想法吗 ?

标签: javascriptreactjs

解决方案


我发现了问题。我的数据从最新到最新排序。

当您缩放时,amchart看起来对此非常敏感。

所以解决方案是颠倒顺序

let data = [
  {
    "highDate": "2020-01-22T21:00:00.000Z",
    "highValue": 74.1300,
  },
  {
    "highDate": "2020-01-22T20:59:00.000Z",
    "highValue": 74.0770
  },
  {
    "highDate": "2020-01-22T20:58:00.000Z",
    "highValue": 74.1100
  },
  {
    "highDate": "2020-01-22T20:57:00.000Z",
    "highValue": 74.0966
  },...

// solution
data = data.reverse();

https://codepen.io/svv2014/pen/WNbPpRd

它是 codepen 片段,您可以取消注释解决方案以查看它是如何工作的。


推荐阅读