Highcharts。浏览器兼容问题

时间:2012-08-28 21:28:22

标签: jquery highcharts

我目前正在使用Highcharts进行展示的网站上工作 一些数据。我一直在测试不同的选项,检索数据 从服务器等,一切都很完美,但只有铬。

在firefox上测试时,我可以看到图表的位置 是。我可以看到边框,标题,打印/导出按钮(所有这一切 由插件本身生成),但不是数据。我用萤火虫来 检查它是否正确地从服务器检索数据 一切似乎都很好。

在IE6上变得更糟,因为我甚至看不到边框,标题等。

我在某处读过Highcharts有折线图和问题的问题 jquery 1.7,但我试过不同类型的图表并改变了我的 jquery版本为1.8。它始终适用于chrome,但不适用 火狐/ IE6

我没有粘贴任何代码因为我真的不知道在哪里 问题是,我希望我只是一个我可以轻松解决的错误.. 提前致谢

编辑:

我检查了jsFiddle,但我无法想象如何在没有改变某些东西的情况下让它在没有服务器端的情况下工作。这是一些代码。希望它有所帮助:

HTML

<html class="gecko  win" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <title>Portal de Conciliacion SMS Prepago</title>
    <script type="text/javascript" src="Plantilla/script.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>  
    <script src="Highcharts/js/highcharts.js"></script>
    <script src="Highcharts/js/modules/exporting.js"></script>
    <style type="text/css" title="currentStyle">@import "DataTables/media/css/demo_table.css";</style>
    <script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="Plantilla/style.css" type="text/css" media="screen">
    <!--[if IE 6]><link rel="stylesheet" href="Plantilla/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="Plantilla/style.ie7.css" type="text/css" media="screen" /><![endif]-->   
</head>
    <body>
        <div style="overflow: hidden">  
            <div id="diferencia" style="width: 48%; height: 200px; margin: 0 auto"></div>
            <br>
            <br>        
            <div id="ttdm" style="float: left; width: 48%; height: 200px; margin: 0 auto"></div>        
            <div id="rtbs" style="float: right; width: 48%; height: 200px; margin: 0 auto"></div>   
        </div>
    </body>
</html>

(我还使用datatables插件来显示页面中的数据。我将代码中的那部分留下了,但保留了包含,以防它可能有事情要做)

JS

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

$(function () {

    var fecha = getUrlVars()["fecha"];
    if (fecha) {
        console.log(fecha);
    }
    else {
        fecha = "";
        console.log("NO!!!");
    }

    var chart_diferencia;
    var chart_ttdm;
    var chart_rtbs;

    $(document).ready(function() {

        var options_diff = {

            chart: {
                renderTo: 'diferencia',
                borderColor: '#000000',
                borderWidth: 2,
                margin: [30, 30, 30, 30],
                type: 'area'
            },

            title: {
                text: 'Diferencia (TTDM vs RTBS)'
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 3 * 24 * 3600 * 1000,
                tickWidth: 5,
                gridLineWidth: 1,
                labels: {
                    align: 'center',
                    formatter: function() {
                        return Highcharts.dateFormat('%e/%m', this.value);
                    }
                }           
            },

            yAxis: [{
                title: {
                    text: null
                },
                labels: {
                    align: 'center',
                    x: -12,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value/1000, 0) + 'K';
                    }
                },
                showFirstLabel: false,
            }],

            legend: {
                enabled: false,
            },

            tooltip: {
                shared: true,
                crosshairs: true,               
            },

            series: [{
                name: 'Diferencia',
                color: '#FF8C00',
                lineWidth: 2,
                marker: {
                    radius: 3
                }
            }]
        };

        var options_ttdm = {

            chart: {
                renderTo: 'ttdm',
                borderColor: '#000000',
                borderWidth: 2,
                margin: [30, 30, 30, 30],
                type: 'area'
            },

            title: {
                text: 'TTDM (cursado)'
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 3 * 24 * 3600 * 1000,
                tickWidth: 5,
                gridLineWidth: 1,
                labels: {
                    align: 'center',
                    formatter: function() {
                        return Highcharts.dateFormat('%e/%m', this.value);
                    }
                }           
            },

            yAxis: [{
                title: {
                    text: null
                },
                labels: {
                    align: 'center',
                    x: -12,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value/1000000, 0) + 'M';
                    }
                },
                showFirstLabel: false,
            }],

            legend: {
                enabled: false,
            },

            tooltip: {
                shared: true,
                crosshairs: true,               
            },

            series: [{
                name: 'TTDM',
                lineWidth: 2,
                marker: {
                    radius: 3
                }
            }]
        };

        var options_rtbs = {

            chart: {
                renderTo: 'rtbs',
                borderColor: '#000000',
                borderWidth: 2,
                margin: [30, 30, 30, 30],
                type: 'area'
            },

            title: {
                text: 'RTBS (facturado)'
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 3 * 24 * 3600 * 1000,
                tickWidth: 5,
                gridLineWidth: 1,
                labels: {
                    align: 'center',
                    formatter: function() {
                        return Highcharts.dateFormat('%e/%m', this.value);
                    }
                }           
            },

            yAxis: [{
                title: {
                    text: null
                },
                labels: {
                    align: 'center',
                    x: -12,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value/1000000, 0) + 'M';
                    }
                },
                showFirstLabel: false,
            }],

            legend: {
                enabled: false,
            },

            tooltip: {
                shared: true,
                crosshairs: true,               
            },

            series: [{
                name: 'RTBS',
                color: '#8B0000',
                lineWidth: 2,
                marker: {
                    radius: 3
                }
            }]
        };


        // 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('Solicitudes/concil_TTDMvsRTBS.php', null, function(tsv, state, xhr) {
            var lines = [],
                listen = false,
                date,

                // set up the two data series
                diferencia = [],
                ttdm = [],
                rtbs = [];

            // inconsistency
            if (typeof tsv !== 'string') {
                tsv = xhr.responseText;
            }

            // split the data return into lines and parse them
            tsv = tsv.split(/\n/g);
            jQuery.each(tsv, function(i, line) {



                listen = true;
                //console.log(line);

                // all data lines start with a double quote
                if (line != "") {


                    line = line.split(',');

                    //console.log(line);



                    date = Date.parse(line[0] +' UTC');

                    diferencia.push([
                        date,
                        parseInt(line[1].replace(',', ''), 10)
                    ]);
                    ttdm.push([
                        date,
                        parseInt(line[2].replace(',', ''), 10)
                    ]);
                    rtbs.push([
                        date,
                        parseInt(line[3].replace(',', ''), 10)
                    ]);
                }
            });

            //console.log(allVisits);
            diferencia.reverse();
            ttdm.reverse();
            rtbs.reverse();


            options_diff.series[0].data = diferencia;
            options_ttdm.series[0].data = ttdm;
            options_rtbs.series[0].data = rtbs;
            //options.series[1].data = newVisitors;

            //console.log(allVisits);
            //console.log(newVisitors);


            Highcharts.setOptions({ 
                lang: { 
                    weekdays: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado']
                } 
            }); 
            Highcharts.setOptions({ 
                lang: { 
                    months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
                } 
            }); 
            chart_diferencia = new Highcharts.Chart(options_diff);
            chart_ttdm = new Highcharts.Chart(options_ttdm);
            chart_rtbs = new Highcharts.Chart(options_rtbs);

            console.log("LISTO!");
        });

        $('#example').dataTable( {
            "sScrollY": "200px",
            "bPaginate": false,
            "bInfo": false,
            "bFilter": false,
            "bAutoWidth": true
        });
    });

});

这有点长,因为我为三种不同的图形设置了选项。获取部分有点乱,因为我通过修改插件附带的示例到达那里,但我已经检查了两个debbuging控制台(firebug和chrome),并且数据收到的两者完全相同。

我在highcharts支持论坛上看到,图表选项中的流浪逗号可能是它在IE6上不起作用的原因,明天要在工作中检查。但正如我前面提到的,在Firefox上我可以看到背景,标题,打印/导出按钮,但没有数据..

高图版本是2.2.5。我下载了2.3,但尚未尝试过。明天早上第一件事。

感谢您的帮助!

0 个答案:

没有答案