在highcharts中绘制日期时间

时间:2013-07-19 14:11:01

标签: datetime plot highcharts

我有15分钟的间隔日期数据来绘制。 在我的情况下,日期可能不一致。

示例格式: var row = [“2012-02-29”,“00:15”,“0”]

我从Java类获取数组用于绘图。

我尝试了一些选项,例如:

    var tempVal = new Array();

    for(var i=0;i<row.length;i++){

        var record = row[i].split(",");
        tempVal[i]=Date.UTC(record[0].substring(0,4), record[0].substring(5,7),   record[0].substring(8,10), record[1].substring(1,3), record[1].substring(4,7)), record[2];

}

在Highcharts中:     系列:[{        数据:tempVal      }]

但我无法在Highcharts上绘制这个。

任何指导都会有所帮助。

2 个答案:

答案 0 :(得分:1)

要在HighCharts上绘制日期时间,您需要一个日期时间值和一个y值。 它看起来应该如下所示:

data: [
                [Date.UTC(2010, 0, 1), 29.9], 
                [Date.UTC(2010, 2, 1), 71.5], 
                [Date.UTC(2010, 3, 1), 106.4]
            ]

或者您可以使用等效的javascript时间值替换Date.UTC(2010, 0, 1)

Date.UTC()可以接受多种不同的格式。请参阅here

因此,您需要做的是将日期值和时间值合并为一个时间值。

在查看您的示例代码后编辑您有几个问题。对于一个数据数组tempVal声明错误。它应该是:

var tempVal = [];

您还应该使用array.push将数据导入tempVal数组。

另一个问题是你的时间序列似乎没有按时间顺序排列 - 当我正确设置你的系列时,我得到了来回的区域“线”。

所有我说的是你需要修复数据数组声明以及如何将数据分配给该数组。这是一个非常简单的方法,它当然可以更快,但我喜欢详细:

for (var i = 0; i < row.length; i++) {
    var record = row[i].split(",");
    var xVal = Date.UTC(parseInt(record[0].substring(0, 4)), parseInt(record[0].substring(5, 7)), parseInt(record[0].substring(8, 10)), parseInt(record[1].substring(1, 3)), parseInt(record[1].substring(4, 7)));
    var yVal = Math.random() * 10;
    var x = [xVal, yVal];
    tempVal.push(x);
}

请参阅更新的示例here。请注意,这些线来回 - 正如我所说,这与您的时间序列不符合时间顺序。另请注意,月份为0,因此Jan = 0和Dec = 11。

答案 1 :(得分:0)

你在控制台上有错误吗?如果您发布了代码,则应该有一个代码。

关于Highcharts - 要求值应该是数字,而不是字符串,例如:record[2]之前应该解析,例如:parseFloat(record[2])