douqie1884 2014-10-31 16:38
浏览 123
已采纳

Highcharts与firefox不兼容

I've built a website that gets data from mysql database and displays them with Highcharts. The problem is that in Chrome and Opera the charts work fine but in firefox i can't get the print of the values on the chart! This is what i get with Crome and Opera.... this is what i get with chrome and opera

and this is what i get with firefox.... enter image description here

I suppose that the problem may be in the php script that gets the data from the database or not.. i really cant understand why is this happening.. Below i provide the creation code of one of the charts and the php script that gets the data....

The necessary libraries:

 <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>

Highchart Creation Code:

 <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(/
/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);
            });
        });

Part of the html table that displays the chart:

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

The php script tha gets the data:

<?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'] . "
";

}

mysql_close($con);
?> 

So?? What should i do?? its very important to run in firefox too..

This is what i get from firefox's console... I have 7 charts that call the data.php and get back 300kb enter image description here

  • 写回答

2条回答 默认 最新

  • doubiao7267 2014-11-03 12:11
    关注

    The problem is that Firefox can't parse your data format:

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

    Meanwhile Chrome works fine:

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

    Instead of using Date.parse(), use Date.UTC(year, month, day, hour, minute, second)

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能