Javascript Highcharts未在日期上拾取-日期被解释为字符串

我试图创建一个x轴不规则的海图，有点像这样：

我通过PHP从mySQL中提取数据，并以JSON格式进行处理

我无法让highcharts/JS以日期格式读取日期-它似乎把它们当作字符串

这是我的剧本：

$(document).ready(function() {
    var options = {
        chart: {
            type: 'spline',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'some title',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            categories: []
        },
        yAxis: {
            title: {
                text: 'L/min'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +': '+
                this.y +'</b><br>'+ this.x;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: []
    }

        $.getJSON("allreports/report.php", function(json) {

        options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        options.chart.renderTo = 'container';
        chart = new Highcharts.Chart(options);
    });

但我的图表如下：

你有没有想过我做错了什么？我需要做什么才能让PHP/JS将这个数组作为一系列的日期时间而不是字符串来处理

---

谢谢大家!

您有两个问题。首先，需要将日期组件值转换为实际的Javascript日期对象。您正在为序列数据寻找的格式是X/Y对数组。使用您的数据，它将如下所示：

[
  [Date.UTC(1970,1,1,1,0,0),1],
  [Date.UTC(1970,1,1,1,33,36),3],
  [Date.UTC(1970,1,1,1,33,36),2],
  [Date.UTC(1970,1,1,1,33,26),2]
]

试着这样做：

var xVals= json[0].data.map( item => {
  var dateArr = point[0].join(',');
  return Date.UTC(dateArr[2],dateArr[1],dateArr[0],dateArr[3],dateArr[4],dateArr[5]);
});

var yVals = json[1].data;

options.series[0] = { 
  name: json[1].name,
  data: xVals.map( (x,i) => [x,yVals[i]])
}

关于系列数据有效格式的一些文档如下：

---

第二，这里有一些重复的X值，这会让人困惑……您希望时间戳是唯一的，否则很难用它们制作折线图。

如果使用datetime类型的axis，则无法设置类别。更多线索可在@S McCrohan答案中找到

[
  [Date.UTC(1970,1,1,1,0,0),1],
  [Date.UTC(1970,1,1,1,33,36),3],
  [Date.UTC(1970,1,1,1,33,36),2],
  [Date.UTC(1970,1,1,1,33,26),2]
]

var xVals= json[0].data.map( item => {
  var dateArr = point[0].join(',');
  return Date.UTC(dateArr[2],dateArr[1],dateArr[0],dateArr[3],dateArr[4],dateArr[5]);
});

var yVals = json[1].data;

options.series[0] = { 
  name: json[1].name,
  data: xVals.map( (x,i) => [x,yVals[i]])
}