如何为 Xively 数据流创建 Highstock 图表？

Question

我正在尝试从 Xively 数据创建一个 Highstock 图表。

我能够从 Xively 数据流的历史查询中创建常规的 line chart，并且通过一些基本的数据格式调整，我能够将其传递给 Highcharts.Chart()。

我尝试过制作Highstock chart，但没有成功。

我不熟悉使用 Highcharts，不熟悉 JavaScript。

Answer 1

在基本的 Highcharts 示例中，您有一些代码可以适应数据格式。该代码采用带有value/at 键的数据点对象数组并制作一个二维数组。

它映射了这个：

[
  { value: "59", at: "2013-05-01T00:59:45.645022Z" },
  { value: "59", at: "2013-05-01T01:59:48.550144Z" },
  { value: "59", at: "2013-05-01T02:59:51.313604Z" }
]

到这里：

[
  ["2013-05-01T00:59:45.645022Z", 59],
  ["2013-05-01T01:59:48.550144Z", 59],
  ["2013-05-01T02:59:51.313604Z", 59]
]

我可以使用一个简单的 for-loop 来做到这一点，我还使用了 Date.parse() 和 parseFloat() 来确保 Highcharts 正确理解我的数据：

    var xively_datapoints = data.datapoints;
    var chartdata = [];

    for (i = 0; i < xively_datapoints.length; i++) {
        chartdata.push([
            Date.parse(xively_datapoints[i].at),
            parseFloat(xively_datapoints[i].value)
        ]);
    }

然后我将 chartdata 数组传递给 Highcharts，如下所示：

    $('#container').highcharts('StockChart', {
        rangeSelector : {
            selected : 1
        },
        series : [{
            name : 'Highstock+Xively',
            data : chartdata, // reformatted data
            tooltip: {
                valueDecimals: 2
            }
        }]
    });