Javascript 向HighCharts折线图添加日期标签

我正在尝试创建一个线图，其中包括沿x轴的日期。我的图表是这样的。

数据数组如下所示：

[[1376092800000,1]，[1379376000000,2]，[138058560000,3]，[1383350400000,4]，[1383350400000,5]，[1383350400000,6]，[1383350400000,7]，[1383350400000,8]，[138594240000,10]，[138594240000,11]，[138594240000,12]，[1388620800000,13]，[1388620800000,14]，[1388620800000,15]，[1388620800000,16]，[1391212800000,17]，[1393632000000,18]，[140158800000,19]，[140158800000,20]，[140158800000,21]，[1404172800000,22]，[1404172800000,23]。

数组中的第一个值应该在（2013年8月1日）绘制一个点；但是，它是在1月1日绘制第一个点。我希望将我的数据与数组中的值匹配。我还希望x轴显示年份后的月份。我已尝试添加

labels: {
    formatter: function () {
        return Highcharts.dateFormat('%m %y', this.value);
    }
}

但这只是将x轴更改为

如有任何建议，将不胜感激。谢谢

编辑

我认为这个问题与我访问数据的方式有关。我调用的是一个包含日期值的XML文件。这是一个工作图的示例，但数据是硬编码的。我想要一种将数据传递到页面的方法

我的代码

//Open the XML file
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "https://atlanticresearchgroupinc.quickbase.com/db/bi6vng8r5?a=API_DoQuery&clist=a", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

var record = xmlDoc.getElementsByTagName("record");
var x = 0;
var y = 0;
var dataset = [];

//Create dataset
for (var i = 0; i < record.length; i++) {
    x = record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue;
    y = y + 1;
    var newArray = [x, y];
    dataset.push(newArray);
}

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Enrollment Over Time',
            x: -20 //center
        },
        xAxis: {
            title: {
                text: 'Date of Enrollment'
            },
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Number of Patients'
            },
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} Patients'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Actual Enrollment',
            data: dataset
        }]
    });
});

//打开XML文件
xmlhttp=新的XMLHttpRequest（）；
open（“GET”https://atlanticresearchgroupinc.quickbase.com/db/bi6vng8r5?a=API_DoQuery&clist=a“，假）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var record=xmlDoc.getElementsByTagName（“记录”）；
var x=0；
var y=0；
var数据集=[]；
//创建数据集
对于（变量i=0；i”，
点格式：“{point.x:%e.%b}:{point.y:.2f}患者”
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：'中间'，
边框宽度：0
},
系列：[{
名称：'实际注册'，
数据：数据集
}]
});
});

查看示例数据数组，它是正确的，如中的示例所示

问题是（正如您可能已经发现的那样），从XML获取它略有不同。在您的代码中，

for

循环中有这一行：

x = record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue;

这里的问题是JavaScript（和Highcharts）不知道您希望它是一个整数。它是作为字符串获取的。并且在数据数组中插入字符串作为时间戳在Highcharts中不起作用

您必须将该

x

值解析为整数，然后将其推送到数组中，例如：

x = parseInt(record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue);

这将使Highcharts将其视为时间戳，并在x轴上显示正确的日期。当它获取字符串时，它只将数据视为x值从0、1、2递增

---

希望这能解决您的问题。

您是否有一个JSFIDLE来显示您的整个代码？数据格式错误，但它与我期望的图形外观不匹配（我希望它呈之字形，但您的是线性增加）@Ondkloss我修复了数据看起来有效的问题中的数据。一定是代码中的其他东西导致了它。你确定是数据导致了屏幕截图中的场景吗？JSFIDLE会使调试更容易。数据的“尽可能基本”演示：