Highcharts 图表未显示在 PC 和 iPhone 的 Safari 和 Internet Explorer 上

Question

正在从控制器接收 JSON 数据，接收格式为：

 [{
  "Time": "2017-08-17 16:35:28.000",
  "Value": "3.85"
}, {
  "Time": "2017-08-17 17:36:28.000",
  "Value": "3.85"
}, {
  "Time": "2017-08-17 18:35:28.000",
  "Value": "3.86"
}, {
  "Time": "2017-08-17 19:35:28.000",
  "Value": "3.86"
}, {
  "Time": "2017-08-18 07:35:28.000",
  "Value": "3.87"
}, {
  "Time": "2017-08-18 18:35:28.000",
  "Value": "3.86"
}];

正在使用的 highcharts 函数：

 <script>

        $.ajax({
            url: '/User/getHighchartsData',
            type: "POST",
            cache: false,
            success: function (data) {
                //You can get your result data here
                console.log("Data :" + data);
                displaydata(data);


            }, error: function (error) {
                console.log(error.responseText);
            }
        });


        function displaydata(data) {
            data.forEach(function (element, index) {


                element.x = new Date(element['Time']).getTime();
                element.y = +element['Value'];

                delete element['Time'];
                delete element['Value'];
            });
            console.log(data);

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            Highcharts.chart('container', {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: 'Pressure'
                },
                xAxis: {
                    title: {
                        text: 'Time'
                    },
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'PSI'
                    }
                },

                plotOptions: {
                    series: {
                        turboThreshold: 0
                    },
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [{
                    data: data
                }]
            });

        }
    </script>

我可以看到错误是在解析日期（即 UNIX 时间戳）时出现的。

~~一种解决方案是使用 Date.UTC()。但它将日期转换为 UTC 时间，这是我不想要的。~~ 还有其他解决方法吗？

Answer 1

您可以在使用 Date.UTC() 的同时设置 timezoneOffset。

API参考：https://api.highcharts.com/highcharts/global.timezoneOffset

API 中提供的示例代码恰好显示了这种情况。

Answer 2

我希望这个解决方案对某人有用。适用于 IE FF Chrome.

日期在 Firefox 和 Chrome 中运行良好，但在 IE 中，日期函数返回 NaN。一个可靠的方法是构造我们自己的日期格式（不改变时区）。

代替element.x = new Date(element['Time']).getTime();使用 :

var dateStr=element['Time']; //returned from sql server timestamp
var a=dateStr.split(" ");
var d=a[0].split("-");
var t=a[1].split(":");
element.x = new Date(d[0],(d[1]-1),d[2],t[0],t[1],t[2]);

Highcharts 图表未显示在 PC 和 iPhone 的 Safari 和 Internet Explorer 上

Highcharts graph not displaying on safari and internet explorer for PC and iPhone

javascript

highcharts

dotnethighcharts