Question

我有一些经过的时间没有在散点图中正确显示，似乎无法让它们以我想要的方式显示。例如，我有经过的时间，如00：02：45,00：00和28:03:31。在我的xAxis上，时间从04:59:30到05:04:00显示。工具提示中的上述时间显示为“05小时02分45秒”，“05小时00分28秒”和“05小时03分31秒”。

我不知道为什么将5添加为h时应该为0.我该如何解决这个问题？

if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                scores.push({ name: data[i].fname + " " + data[i].lname, x: Date.parse(data[i].elapsedTime), y: data[i].score });
            }

            Highcharts.chart('avgFirstTryChart', {
                chart: {
                    type: 'scatter',
                    zoomType: 'x'
                },
                title: {
                    text: 'Average Score First Try'
                },
                xAxis: {
                    type: 'datetime',
                    title: {
                        text: 'Elapsed Time (hours)'
                    },
                    dateTimeLabelFormats: {
                        day: '%H:%M:%S'
                    },
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%H:%M:%S', this.value)
                        }
                    },
                    startOnTick: true
                },
                yAxis: {
                    title: {
                        enabled: true,
                        text: 'Score'
                    },
                    min: 0,
                    max: 100,
                    gridLineWidth: 1,
                    lineWidth: 0,
                    tickWidth: 0,
                    showLastLabel: true
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        tooltip: {
                            pointFormat: '{point.name}, {point.x: %H hrs %M mins %S secs} - [score {point.y}%]'
                        }
                    },
                    series: {
                        point: {
                            events: {
                                click: function () {
                                    var point = this,
                                        series = point.series,
                                        chart = series.chart,
                                        xAxis = series.xAxis;

                                    xAxis.setExtremes(this.x - 25000, this.x + 25000);
                                    chart.showResetZoom();
                                }
                            }
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Score',
                    color: 'rgba(223, 83, 83, .5)',
                    data: scores
                }]
            });
        }

Answer 1

对于遇到这种情况的任何人来说，问题是沿着x轴的值。用户有以下内容：

generator.close()

解析为：

data[0].elapsedTime = '1900-01-01T00:02:45.77'
data[1].elapsedTime = '1900-01-01T00:00:28.50'

简单的解决方案是从1900年开始删除删除秒，如下所示：

Date.parse(data[0].elapsedTime) = -2208970634230
Date.parse(data[1].elapsedTime) = -2208992371500

这样，图表显示经过的时间，以毫秒为单位，因为它被格式化为仅显示HH：MM：SS，年份无关紧要。

Answer 2

只需使用useUTC属性禁用轴缩放的UTC时间。

API参考：
http://api.highcharts.com/highcharts/global.useUTC
http://api.highcharts.com/highcharts/Highcharts.setOptions

例：
http://jsfiddle.net/a6h2k4Lv/

Highcharts DateTime xAxis和工具提示格式问题

2 个答案: