Question

我的图表每秒更新一次，我想在工具提示和x轴上显示时间戳（即2016年4月7日，15：12：38）。它看起来应该是这样的：http://jsfiddle.net/qq5rqazj/2/。我不知道如何自定义我的图表。我附上一段代码：

       $('#container').highcharts({
            chart:{
                    type: 'spline',
                    animation: Highcharts.svg,
                    marginRight: 10,
                    events: {load: function () {series = this.series[0];}}
                },
            title:{text: 'Live random data'},
            xAxis:{tickPixelInterval: 150},
            yAxis:{title: {text: 'Value'},
                plotLines: [{value: 0,width: 1,color: '#808080'}]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.numberFormat(this.x, 2) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                    }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{ name: 'Random data', data:DatosRecuperados}]
        });

x，y是数据库中的值，其中x是int，y是当前时间戳2016-05-29 17:56:15

Answer 1

您希望在工具包中使用Highcharts.dateFormat()方法（请参阅http://api.highcharts.com/highcharts#Highcharts.dateFormat）。

以下示例将针对May 30, 2016的格式this.x返回：

tooltip: {
    formatter: function () {
        return Highcharts.dateFormat('%B %e, %Y', this.x) + '<br/>' + 
            Highcharts.numberFormat(this.y, 2);
    }
},

如Highcharts文档中所述：

格式化JavaScript日期时间戳（自1970年1月1日起的毫秒数）到人类可读的日期字符串。格式是其中的一个子集 PHP格式的strftime函数。

这只是一个子集，因为它不会接受某些值，例如%c的完整时间戳。

我希望这有帮助！

Answer 2

使用内置xDateFormat选项。

tooltip: {
    xDateFormat: '%B, %d %Y %H:%M:%S',
},

您可以在this Highcharts' fiddle上看到该演示。

格式化Highcharts - 工具提示中的时间戳，日x轴

2 个答案: