Javascript highcharts：如何在xAxis中将浮动显示为datetime

我试图绘制以下示例数据。我想显示x轴作为浮点数的日期时间。但它继续显示为1970-01-01。有人能帮助我理解如何正确地获得它吗

我复制了下面的high charts示例。但我想将x轴显示为日期，如“2017-03-20”，而不是原始浮动

非常感谢你的帮助

多谢各位

    Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        credits: {
            text: 'Songhuiming',
            href: 'http://www.songhuiming.com'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            type: 'datetime',
            dateTimeLabelFormats: {day: '%Y-%b-%d'},
            categories: [1489298400000.0, 1492923600000.0, 1492318800000.0, 1480226400000.0, 1494133200000.0, 1490504400000.0, 1488088800000.0, 1475384400000.0, 1493528400000.0, 1491109200000.0, 1480831200000.0, 1471755600000.0],
            crosshair: true,
            labels: {rotation: 90, step: 2}
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'spline',
            data: [110, 105, 104, 96, 102, 93, 93, 105, 118, 119, 101, 94],
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });

---

似乎适当的dateTimeLabelFormats工作不正常，因此您可以将浮点时间戳转换为格式化的日期字符串：

new Date(1489298400000.0).toLocaleDateString()

下面是完整的示例：

Highcharts.chart（'container'{
图表：{
zoomType:'xy'
},
标题：{
文字：“东京月平均气温和降雨量”
},
学分：{
文字：“宋慧明”，
href:'http://www.songhuiming.com'
},
副标题:{
文本：'来源：WorldClimate.com'
},
xAxis：[{
类别：[新日期（1489298400000.0）.toLocaleDateString（），新日期（149292360000.0）.toLocaleDateString（），新日期（149238800000.0）.toLocaleDateString（），新日期（1480226400000.0）.toLocaleDateString（），新日期（1490504400000.0）.toLocaleDateString（），新日期（1488088800000.0）.toLocaleDateString（）），新日期（1475384400000.0）。toLocaleDateString（），新日期（1493528400000.0）。toLocaleDateString（），新日期（1491109200000.0）。toLocaleDateString（），新日期（1480831200000.0）。toLocaleDateString（），新日期（1471755600000.0）。toLocaleDateString（），
十字准星：没错，
标签：{旋转：90，步骤：2}
}],
yAxis:[{//主yAxis
标签：{
格式：“{value}°C”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
标题：{
文字：“温度”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
}
}，{//次雅克西
标题：{
文字：‘降雨’，
风格：{
颜色：Highcharts.getOptions（）.color[0]
}
},
标签：{
格式：“{value}mm”，
风格：{
颜色：Highcharts.getOptions（）.color[0]
}
},
相反：对
}],
工具提示：{
分享：真的
},
图例：{
布局：“垂直”，
对齐：“左”，
x:120，
垂直排列：“顶部”，
y:100，
浮动：是的，
背景颜色：（Highcharts.theme&&Highcharts.theme.legendBackgroundColor）| |'#FFFFFF'
},
系列：[{
名称:"降雨",，
键入：“列”，
亚克西斯:1,，
数据：[1,7,2,1,4,1,1,1,4,6,1,1,1]，
工具提示：{
valueSuffix:'mm'
}
}, {
名称：“温度”，
类型：“样条线”，
数据：[110、105、104、96、102、93、93、105、118、119、101、94]，
工具提示：{
valueSuffix:“°C”
}
}]
});
将手动格式化的时间戳分配给
类别
在这里不是一个好方法。Highcharts已经内置了处理axis日期时间标签的机制

首先将x轴的
类型更改为
datetime
。然后使用时间戳作为点的x值。可以通过为每个点显式指定特定的时间戳，或者使用
pointInterval
结合
pointStart
（当点之间的距离恒定时）来完成

关于数据格式的文档：

记录轴的类型：

API参考资料：