在高图中显示时间序列数据答案

【问题标题】：Displaying time series data in a highchart在高图中显示时间序列数据
【发布时间】：2021-09-10 15:44:59
【问题描述】：

我正在尝试使用此图表来显示我的数据 - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/spline-irregular-time

我的数据在后端看起来像这样 -

我的图表是这样的

请注意 x 轴上的日期是错误的，并且标签上的日期始终显示所有数据点的 1 Jan。如何解决此问题，以使标签和 x 轴上的日期正确。这是我的 JS 代码

var credit = '<?php echo (isset($credit))?$credit:0; ?>'
Highcharts.chart('transactionId', {
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Snow depth at Vikjafjellet, Norway'
            },
            subtitle: {
                text: 'Irregular time data in Highcharts JS'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                     month: '%e. %b',
                     year: '%b'
                },
                title: {
                    text: 'Date'
                }
            },
            yAxis: {
                title: {
                    text: 'Snow depth (m)'
                },
                min: 0
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
            },

            plotOptions: {
                series: {
                    marker: {
                        enabled: true
                    }
                }
            },

            colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            series: [{
                name: "Winter 2016-2017",
                data: JSON.parse(credit)
            }],

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        plotOptions: {
                            series: {
                                marker: {
                                    radius: 2.5
                                }
                            }
                        }
                    }
                }]
            }
        });

【问题讨论】：

标签： javascript php laravel highcharts

【解决方案1】：

问题在于日期格式2020-12-13。直接传递日期字符串不起作用。您必须转换为 Date.UTC(year, month, day) 格式。所以你的 credit 数组在传递给图表配置时应该是这样的。

credit = [
[Date.UTC(2020, 12, 13), 5000],
[Date.UTC(2020, 12, 19), 50000],
...
]

【讨论】：