Question

我在我的角度应用程序中使用Highchart多折线图。我无法将DATA加载到图表中。

下面是我的示例数据。

[
  {
    "name": "SQL Injection Attack: SQL Tautology Detected.",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 34),12]",
      "[Date.UTC(2018, 6, 20, 12, 33),12]",
      "[Date.UTC(2018, 6, 20, 12, 32),10]"
    ]
  },
  {
    "name": "TestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 27),2]"
    ]
  },
  {
    "name": "aTestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 28),1]"
    ]
  }
]

当我删除双引号时，它工作正常。但是我不知道如何删除双引号并将此数据发送到Highchart。

Answer 1

它不起作用，因为您试图为图表提供String类型的点，但是期望Object，Array或Number，所以它不知道该如何处理。

实际上，我不知道为什么您不只是从服务器获取时间戳而不是从字符串值获取时间戳，这应该是避免不必要的数据处理的最佳方法。

为了解析该字符串，您可以使用eval()函数，但这是确实有害的，因此您应该非常仔细使用它。假设用户正在为图表提供数据，并且此函数执行作为参数传递的每个javascript。如您所见，它极大地违反了安全性。示例如下：https://jsfiddle.net/vpjbg7f8/，但我不建议在用户是数据提供者时使用它。

更好的解决方案是解析每个字符串，获取适当的值（数字），然后自己使用Date.UTC，就像这样：

var series = [
  {
    "name": "SQL Injection Attack: SQL Tautology Detected.",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 34),12]",
      "[Date.UTC(2018, 6, 20, 12, 33),12]",
      "[Date.UTC(2018, 6, 20, 12, 32),10]"
    ]
  },
  {
    "name": "TestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 27),2]"
    ]
  },
  {
    "name": "aTestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 28),1]"
    ]
  }
]

series.forEach(series => {
    series.data = series.data.map(point => {
        var parsedData = point.split(/\D+/).splice(1, 6).map(value => { return parseInt(value, 10) })
        var value = parsedData[5]
        parsedData.splice(-1, 1)

        return [Date.UTC(...parsedData), value]
  }).reverse()
})

实时示例：https://jsfiddle.net/qftn5p0s/

无法加载Highcharts JSON

1 个答案: