Highcharts图表不显示在Safari和iPhone的safari和Internet Explorer上

时间:2017-11-01 15:16:12

标签: javascript highcharts dotnethighcharts

正在从控制器接收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时间,这是我不想要的。 还有其他方法吗?

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

我希望这个解决方案对某人有用。适用于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]);