javascript - highcharts:如何正确地将 float 显示为 xAxis 中的日期时间

Question

我正在尝试绘制以下示例数据。我想将 x 轴显示为 float 中的日期时间。但它继续显示为 1970-01-01。有人可以帮助我了解如何正确获取它吗？

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

非常感谢您的帮助!

谢谢。

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

Answer 1

似乎属性 dateTimeLabelFormats 无法正常工作，因此您可以将浮点时间戳转换为格式化日期字符串:

new Date(1489298400000.0).toLocaleDateString()

这里是完整的例子:

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: [{
            categories: [new Date(1489298400000.0).toLocaleDateString(), new Date(1492923600000.0).toLocaleDateString(), new Date(1492318800000.0).toLocaleDateString(), new Date(1480226400000.0).toLocaleDateString(), new Date(1494133200000.0).toLocaleDateString(), new Date(1490504400000.0).toLocaleDateString(), new Date(1488088800000.0).toLocaleDateString(), new Date(1475384400000.0).toLocaleDateString(), new Date(1493528400000.0).toLocaleDateString(), new Date(1491109200000.0).toLocaleDateString(), new Date(1480831200000.0).toLocaleDateString(), new Date(1471755600000.0).toLocaleDateString()],
            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'
            }
        }]
    });

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>