Question

我正在尝试使用此CSV创建样条图表：

slave_id,date,time,rtc_temp,temp1,temp2,temp3
1,2017/12/26,16:42:59,21,11.50,13.13,5.88
2,2017/12/26,16:43:29,21,14.13,20.63,99.99
1,2017/12/26,16:44:00,21,11.50,13.13,5.88
2,2017/12/26,16:44:30,21,14.13,20.63,99.99
1,2017/12/26,16:45:01,21,11.50,13.13,5.88
2,2017/12/26,16:45:31,21,14.13,20.63,99.99
1,2017/12/26,16:46:02,21,11.50,13.13,5.88
2,2017/12/26,16:46:32,21,14.13,20.63,99.99

如您所见[{3}}，图表显示日期和时间，但x轴未接受日期/时间。

我尝试过使用date.UTC，但这也不起作用。有人能指出我正确的方向吗？

here [IMAGE] [由于CSV丢失而无法正常工作]

https://jsfiddle.net/asvoy6b9/

Answer 1

我看到代码中的date变量是一个字符串：

            // all data lines start with a double quote
            line = line.split(',');
            date = line[1] + " " + line[2];

            (...)

                RTC.push([
                    date,
                    parseInt(line[3], 10)
                ]);

如果您选择将点的选项构造为两个值的数组，并且第一个值是一个字符串，那么它将被视为其name属性（不是x）。

解释：https://www.highcharts.com/docs/chart-concepts/series

在这种情况下，Highcharts将后续整数分配为所有点的x值（这就是为什么有00:00:00.000（1970年1月1日），00:00:00.001等值的原因。）

您需要将日期解析为时间戳。您可以使用Date.UTC()（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC）或其他功能。

Answer 2

我已设法使用以下代码使用Date.UTC：

var yyyymmdd = line[2].split("-"); //Split the date: 2017 12 16
var hhmmss = line[3].split(":"); //Split the time: 16 11 14
var date = Date.UTC(yyyymmdd[0], yyyymmdd[1] - 1, yyyymmdd[2], hhmmss[0], hhmmss[1], hhmmss[2]); //Stitch 'em together using Date.UTC

带有外部CSV $ .get的Highcharts - 没有xAxis日期

2 个答案: