使用AngularJS绘制神经节图

我想在AngularJS中使用Highcharts绘制一个图形，如下所示：

此图表示最近一小时内服务器的负载。因此，给定的数据点包含一个点和一个历元时间

数据以JSON格式接收，[point，epochtime]，如下所示：

[
  {
    "ds_name": "a0",
    "cluster_name": "",
    "graph_type": "stack",
    "host_name": "",
    "metric_name": "1-min",
    "color": "#BBBBBB",
    "datapoints": [
      [
        0.58,
        1604244900
      ],
      [
        0.59733333333,
        1604244915
      ],
      [
        0.6,
        1604244930
      ],
      [
        0.6,
        1604244945
      ],
      [
        0.6,
        1604244960
      ],
      [
        0.6,
        1604244975
      ],
      [
        0.612,
        1604244990
      ]
    ]
  },
  {
    "ds_name": "a2",
    "cluster_name": "",
    "graph_type": "line",
    "host_name": "",
    "metric_name": "CPUs ",
    "color": "#FF0000",
    "datapoints": [
      [
        2,
        1604244900
      ],
      [
        2,
        1604244915
      ],
      [
        2,
        1604244930
      ],
      [
        2,
        1604244945
      ],
      [
        2,
        1604244960
      ],
      [
        2,
        1604244975
      ],
      [
        2,
        1604244990
      ],
      [
        2,
        1604245005
      ]
    ]
  },
  {
    "ds_name": "a3",
    "cluster_name": "",
    "graph_type": "line",
    "host_name": "",
    "metric_name": "Procs",
    "color": "#2030F4",
    "datapoints": [
      [
        1,
        1604244900
      ],
      [
        1,
        1604244915
      ],
      [
        1,
        1604244930
      ]
    ]
  }
]

我在这里只发布了数据集的一部分，因为它太长了，但我想你可以理解它的格式

---

如何使用Highcharts绘制类似的图形？

这里最重要的是正确解析日期。由于JSON中的名称与Highcharts中的名称不同，因此您必须手动将它们传递到正确的位置，正如我在下面的演示中所做的那样
我还建议使用

keys

属性，因为数据应该声明为

[x，y]

，在您的情况下，情况正好相反。您可以通过设置此属性来更改此属性。
请注意，在Highcharts中没有像

堆栈

这样的系列，它只是

列

API:

---

演示：

这里最重要的是正确解析日期。由于JSON中的名称与Highcharts中的名称不同，因此您必须手动将它们传递到正确的位置，正如我在下面的演示中所做的那样
我还建议使用

keys

属性，因为数据应该声明为

[x，y]

，在您的情况下，情况正好相反。您可以通过设置此属性来更改此属性。
请注意，在Highcharts中没有像

堆栈

这样的系列，它只是

列

API:

---

演示：

我最终就是这样做的，最合适的图表类型是直线图和面积图

Highcharts.chart("container", {
  chart: {
    type: 'line'
  },
  xAxis: {
    type: "datetime",
        labels: {
        formatter: function () {
           return Highcharts.dateFormat('%H:%M:%S.%L', this.value);
             }
        }
  },
  series: [{
      name: "A",
      type: "area",
      color: "#BB000B",
      keys: ["y", "x"],
      data: [
        [0.58, 1604244900],
        [0.59733333333, 1604244915],
        [0.6, 1604244930],
        [0.6, 1604244945],
        [0.6, 1604244960],
        [0.6, 1604244975],
        [0.612, 1604244990]
      ]
    },
    {
      name: "B",
      type: "line",
      color: "#FF00F0",
      keys: ["y", "x"],
      data: [
        [2, 1604244900],
        [2, 1604244915],
        [2, 1604244930],
        [2, 1604244945],
        [2, 1604244960],
        [2, 1604244975],
        [2, 1604244990],
        [2, 1604245005]
      ]
    }, {
      name: 'C',
      keys: ['y', 'x'],
      data: [
        [1, 1604244900],
        [1, 1604244915],
        [1, 1604244930],
        [1, 1604244945],
        [1, 1604244960],
        [1, 1604244975],
        [1, 1604244990],
        [1, 1604245005]
      ]
    }
  ]
});

---

这就是我最终做的，最合适的图表类型是直线图和面积图

Highcharts.chart("container", {
  chart: {
    type: 'line'
  },
  xAxis: {
    type: "datetime",
        labels: {
        formatter: function () {
           return Highcharts.dateFormat('%H:%M:%S.%L', this.value);
             }
        }
  },
  series: [{
      name: "A",
      type: "area",
      color: "#BB000B",
      keys: ["y", "x"],
      data: [
        [0.58, 1604244900],
        [0.59733333333, 1604244915],
        [0.6, 1604244930],
        [0.6, 1604244945],
        [0.6, 1604244960],
        [0.6, 1604244975],
        [0.612, 1604244990]
      ]
    },
    {
      name: "B",
      type: "line",
      color: "#FF00F0",
      keys: ["y", "x"],
      data: [
        [2, 1604244900],
        [2, 1604244915],
        [2, 1604244930],
        [2, 1604244945],
        [2, 1604244960],
        [2, 1604244975],
        [2, 1604244990],
        [2, 1604245005]
      ]
    }, {
      name: 'C',
      keys: ['y', 'x'],
      data: [
        [1, 1604244900],
        [1, 1604244915],
        [1, 1604244930],
        [1, 1604244945],
        [1, 1604244960],
        [1, 1604244975],
        [1, 1604244990],
        [1, 1604245005]
      ]
    }
  ]
});