javascript - 来自 API 请求的动态多线图表

Question

我有这种模式的 API 响应，我想将这些数据动态添加到 highcharts 中。我还想为每一列创建一个单独的数组，然后将每个数组传递给 Highcharts。谁能帮我解决这个问题。当我尝试遍历 API 结果时，结果将是未定义的。

示例 API 响应：

{
 "data": [
  [
  {
    "name": "Time",
    "unit":"Y-m-d"
  },
  {
    "location": "XYZ",
    "name": "ABC",
    "unit": "kmh",
   },
  {
    "location": "A1",
    "name": "xcds",
    "unit": "kmh",

  },
  {
    "location": "A2",
    "name": "efg",
    "unit": "avg",

  },
  {
    "location": "A3",
    "name": "fgf",
    "unit": "avg",

  },
  {
    "location": "A1",
    "name": "klm",
    "unit": "kmh",

  },
  {
    "location": "A5",
    "name": "ABCDE",
    "unit": "kmh",

  }
],
[
  "2020-08-05T10:00:00",
 43.8
 67
 65.2
 56
 6765
],
[
  "2020-08-05T10:05:00",
  2.69924,
  65.8,
  7.
  136,
  11.5,
 19
],
[
  "2020-08-05T10:10:00",
  18.3
  93.6,
  21,
  23,
  26,
  15,
],
[
  "2020-08-05T10:15:00",
  39,
  26,
  24
  89,
  70.48,
  1.10
], 

], }

如何将每个索引值传递到数组中？谢谢您的帮助。

标签： javascripthtmlhighchartsmultiline

Answer 1

         var chart = new Highcharts.Chart({
                chart: {
                  type: 'spline',
                  renderTo: "container"
                },
                colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],
                title: {
                  text: ' values'
                },
                subtitle: {
                  text: ' Data'
                },
                xAxis: {
                  categories: dataArray.reverse() //.reverse() to have the min year on the left 
                },
                plotOptions: {
                  series: {
                    marker: {
                      enabled: false
                    }
                  }
                },
                tooltip: {
                  valueDecimals: 2,
                  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
                },
                  series: [{
                      type: 'line',
                      name: 'ABC',
                      data : array_final.reverse()
                  }, {
                      name: 'XYx',
                      data: array_final1.reverse()
                  }, {
                      name: 'xyz',
                      data: array_final2.reverse()
                  }, {
                      name: 'klm',
                      data: array_final3.reverse()
                  }, {
                      name: 'ddd',
                      data: array_final4.reverse()
                  }, {
                      name: ''ABCD",
                      data: array_final5.reverse()
                  }]