Highcharts不与firefox兼容

Question

我已经构建了一个从mysql数据库获取数据并使用Highcharts显示它们的网站.问题是在Chrome和Opera中图表工作正常但在Firefox中我无法获得图表上的值的打印!这就是我用Crome和Opera获得的......

这就是我用firefox获得的....

我想,问题可能出在PHP脚本,从数据库或不获取数据..我真的无法理解为什么会出现这种情况..下面我提供一个图表中创建代码和PHP脚本,获取数据....

必要的图书馆:

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.highcharts.com/highcharts.js"></script>
 <script src="http://code.highcharts.com/modules/exporting.js"></script>
 <script src="http://code.highcharts.com/themes/gray.js"></script>

高图创作代码:

 <script type="text/javascript">
var chart;
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container1',
                    defaultSeriesType: 'area',
                    marginRight: 10,
                    marginBottom: 25,
                    zoomType: 'xy'  //zoom
                },
                 credits: {
                    enabled: false
                            },

                title: {
                    text: 'Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    type: 'datetime',                       
                    //tickInterval:  4 * 24 * 3600 * 1000 , // one hour
                     //minRange: 14 * 24 * 3600000,
                    minRange: 4 * 24 * 3600 * 1000, 
                    tickWidth: 0,
                    gridLineWidth: 2,
                    /*labels: {
                        align: 'center',
                        x: -3,
                        y: 20,
                        formatter: function() {
                            return Highcharts.dateFormat('%b %e', this.value);
                        }
                    }*/
                },
                yAxis: {
                    title: {
                        text: 'Temperature °C',
                        lineColor: '#FF0000',
                        lineWidth: 1,


                    },
                    min: null, // Will for min and max to adjust when you zoom                      
                    max: null, //                         
                    startOnTick: false,                
                    minTickInterval: 1,                
                    showFirstLabel: false   

                    /*plotLines: [{
                        value: 0,
                        width: 0,
                        color: 'green'
                    }]*/
                },
                tooltip: {
                valueDecimals: 2
                    //formatter: function() {
                          //  return Highcharts.dateFormat('%b %e', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
                    //}

                },


                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },

            plotOptions: {                  
                        series: {
                            marker: {                               
                                radius: 1
                                    }
                                    }
                             },         

                series : [{
                type: 'area',
                name : 'Temperature °C',                
                color: '#0099FF',
                fillOpacity: 0.3,
                showInLegend: false,


        }]                   
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('php_scripts/data.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                try {
                    // split the data return into lines and parse them
                    tsv = tsv.split(/\n/g);
                    jQuery.each(tsv, function(i, line) {
                        line = line.split(/,/);
                        date = Date.parse(line[0] +' UTC');
                        traffic.push([
                            date,
                            parseInt(line[4].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

显示图表的html表的一部分:

<td><div id="container1" style="width: 725px; height: 300px;"></div></td>

php脚本获取数据:

<?php
$con = mysql_connect("db4free.net","username","password");

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("weatherlog", $con);

$result = mysql_query("SELECT * FROM weatherlog");

while($row = mysql_fetch_array($result)) {

echo $row['TIME'] . " , " . $row['TEMP']. " , " . $row['HUMIDITY'] . " , " . $row['PRESSURE'] . "        , " . $row['OUTTEMP'] . " , " . $row['OUTHUMIDITY'] . " , " . $row['RAIN'] . " , " .    $row['WINDSPEED'] . "\n";

}

mysql_close($con);
?> 

所以？？我该怎么办？？在Firefox中运行非常重要..

这是我从firefox的控制台得到的...我有7个图表调用data.php并获得300kb

Answer 1

问题是Firefox无法解析您的数据格式:

Date.parse('2014-11-02 22:34:51 UTC'); //returns NaN!

同时Chrome工作正常:

Date.parse('2014-11-02 22:34:51 UTC'); //returns 1414967691000

而不是使用Date.parse(),使用Date.UTC(year, month, day, hour, minute, second)