HighChart - 实时图表的 X 轴日期时间错误答案

【问题标题】：HighChart- Wrong Datetime in the X-Axis for Live ChartHighChart - 实时图表的 X 轴日期时间错误
【发布时间】：2017-06-13 14:43:56
【问题描述】：

我将 HighChart 用于实时图表（数据每 10 秒更改一次）。在每一秒中，将进行一次 ajax 调用并从控制器获取数据作为 json。在示例中，我可以每 10 秒获取一次数据，但 X 轴上显示的时间是错误的。它没有显示正确的时间，而是显示距离当前时间超过 4 的时间。

这是 HTML+js 文件

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    @*//Add JQUERY*@
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    @*//Add HighChart.js*@
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script>
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline',
                    events: {
                        load: getData
                    }
                },
                title: {
                    text: 'Live Bin Usage'
                },
                xAxis: {
                   type:'datetime',
                    tickPixelInterval: 150
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Value',
                        margin: 80
                    }
                },
                series: [{
                    name: 'Time'
                }]
            });
        });

        /**
        * Request data from the server, add it to the graph and set a timeout to request again
        */
        function getData() {
            $.ajax({
                url: '/AswinDemo/FetchData',
                dataType: 'json',
                success: function (data) {
                    var series = chart.series[0],
                    shift = series.data.length > 20; // shift if the series is
                    // longer than 20
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    // add the point
                    chart.series[0].addPoint([x ,data.BinUsage], true, shift);
                    // call it again after one second
                    setTimeout(getData, 1000);
                },
                cache: false
            });
        }
    </script>
</head>
<body>

    <div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

服务器或控制器

 public ActionResult FetchData()
        {


            Random rn = new Random();


            return Json(new { BinUsage = rn.Next(), Time = DateTime.Now.TimeOfDay.ToString()} ,JsonRequestBehavior.AllowGet );
        }

以下是图表的屏幕截图：- 您可以看到我图表中的时间与 PC 的时间不同（在任务栏中）

【问题讨论】：

假设导致差异的实际数据没有问题，尝试将global.useUTC设置为false - api.highcharts.com/highcharts/global.useUTC
@jlbriggs 非常感谢。它有帮助

标签： javascript razor highcharts dotnethighcharts

【解决方案1】：

我通过将 global.useUTC 设置为 false 解决了这个问题。谢谢。

【讨论】：