使用 AngularJS 绘制神经节图答案

【问题标题】：Plot a Ganglia graph using AngularJS使用 AngularJS 绘制神经节图
【发布时间】：2020-11-02 08:47:37
【问题描述】：

我想在 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 绘制类似的东西？

【问题讨论】：

标签： angularjs graph highcharts ganglia

【解决方案1】：

这里最重要的是正确解析日期。由于 JSON 中的名称与 Highcharts 中的名称不同，因此您必须手动将它们传递到正确的位置，就像我在下面的演示中所做的那样。
我还建议使用keys 属性，因为数据应声明为[x, y]，在您的情况下则相反。您可以通过设置此属性来更改它。
请注意，在 Highcharts 中没有 stack 这样的系列，它只是 column。

API： https://api.highcharts.com/highcharts/series.line.keys
演示： https://jsfiddle.net/BlackLabel/246phxum/

【讨论】：

【解决方案2】：

所以我最终是这样做的，最合适的图表类型是折线图和面积图。

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]
      ]
    }
  ]
});

【讨论】：