HighCharts:如何正确地将浮子作为Xaxis中的DateTime显示

Question

我正在尝试绘制以下示例数据。我想将X轴显示为来自浮点数的日期。但它的显示为1970-01-01。有人可以帮助我理解如何正确获取它？

我复制了下面的高图示例。但是我想将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'
            }
        }]
    });

Answer 1

似乎适用于datetimelabelformats不正常，因此您可以将float时间戳转换为格式的日期字符串：

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>

Answer 2

将手动格式的时间戳分配给categories不是一个好方法。HighCharts已经具有用于处理轴的DateTime标签的机制。

首先将X轴的type更改为datetime。然后将时间戳作为点的x值。可以通过将特定的时间戳分配给每个点或使用pointInterval与pointStart合并来完成(当点之间的距离是恒定时(。

。

关于数据格式的文档：https：//www.highcharts.com/docs/chart-concepts/series

关于轴类型的文档：https：//www.highcharts.com/docs/chart-concepts/axes

API参考：

• https://api.highcharts.com/highcharts/plotoptions.series.pointStart
• https://api.highcharts.com/highcharts/plotoptions.series.pointInterval