javascript - 为什么 x 轴不显示日期？

Question

我有一个与 HighCharts 相关的问题。下面是我的代码，用于实现 y 轴上具有整数值、x 轴上具有日期的 highchart。我正在从数据库中获取数据，包括日期和值。

X 轴日期和时间显示不正确。在我的数据库中，它看起来像这样，2015-04-27 15:26:41.463。

var a = [];
$('#container').highcharts({
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                xAxis[0].setCategories(x);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        categories: a
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 1);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        data: series
    }]
});

更新

这就是我现在达到的目标

    .success(function (point) {

    for (i = 0; i < point.length; i++) {
        myDate[i] = point[i].date_time;
        value[i] = point[i].value_db;
    }

    for (j = 0; j < myDate.length; j++) {
        var temp = new Array(myDate[j], value[j]);
        mySeries[j] = temp;
    }
    DrawChart(mySeries, myDate, value);

})

function DrawChart(series, x, y) {
    //Fill chart
    $('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];

                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            //tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: series
        }]
    });
}

更新2

请帮忙。

Answer 1

您必须将 myDate[i] = point[i].date_time; 更改为:

myDate[i] = parseInt((point[i].date_time).substring(6, 19));

这样它将包含日期时间的 UTC 日期格式。

然后你必须像这样使用xAxis.labels.formatter:

xAxis: { 
    labels: { 
        formatter: function() { 
            var date = new Date(this.value); 
            return date.getFullYear() + "-" +
                   date.getMonth() + "-" +
                   date.getDate() + " " +
                   date.getHours() + ":" +
                   date.getMinutes() + ":" +
                   date.getSeconds(); 
        } 
    } 
}

告诉图表如何显示它的 xAxis 标签。

要在 yAxis 中显示更多标签，您可以使用:

yAxis: { 
    tickInterval: 100 // if you want the labels to show every 100 values 
}