将日期标签添加到HighCharts折线图中

Question

我正在尝试创建一个折线图，其中包括沿x轴的日期。 我的图看起来像这样。

数据数组如下所示： [[1376092800000,1],[1379376000000,2],[1380585600000,3],[1383350400000,4],[1383350400000,5],[1383350400000,6],[1383350400000,7],[1383350400000,8],[1385942400000,9],[1385942400000,10],[1385942400000,11],[1385942400000,12],[1388620800000,13],[1388620800000,14],[1388620800000,15],[1388620800000,16],[1391212800000,17],[1393632000000,18],[1401580800000,19],[1401580800000,20],[1401580800000,21],[1404172800000,22],[1404172800000,23]]

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

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

但这只是将x轴更改为

任何建议将不胜感激。 谢谢！

编辑

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

我的密码

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

Answer 1

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

问题（您可能已经发现）是从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轴上显示正确的日期。 当它得到字符串时，它只是将数据视为具有从0、1、2 ...递增的x值。

希望这能解决您的问题。