Flot Chart:在IE 8中不起作用

时间:2014-02-26 10:13:47

标签: javascript html internet-explorer flot

我为这个问题尝试了不同的解决方案,例如:

  
      
  • 使用修改后的html5shiv。 html5shiv脚本添加了将HTML5标记添加到旧版Internet Explorer中的功能。
  •   
<!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
<![endif]-->
  
      
  • 使用excanvas为
  • 提供后备   
    <!--[if lte IE 8]>
        <script type="text/javascript" src="/Scripts/excanvas.min.js"></script>
    <![endif]-->

没有任何帮助。收到错误:

  

Canvas不可用。如果你正在使用带有后备的IE   Excanvas,那么你的条件包含有错,   或者页面没有DOCTYPE,并且在Quirks模式下呈现。

其他一些解决方案?


上面包含flot.js之前的所有脚本。

更改DOCTYPE也无济于事。


页面来源:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="shortcut icon" href="/favicon.ico" />
    <!-- common styles & scripts -->
    <link rel="stylesheet" type="text/css" href="/Content/css/custom-fonts.css?v=201306210000" />
    <link rel="stylesheet" type="text/css" href="/Content/css/styles.css?v=201306210000" />
    <script type="text/javascript" src="/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/common.js?v=201306211714"></script>
    <script type="text/javascript" src="/Scripts/control-custom-alert-scripts.js?v=201306211714"></script>
    <!-- custom styles & scripts -->

    <script type="text/javascript" src="/Scripts/jquery.tools.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.form.js"></script>



    <script type="text/javascript" src="/Scripts/localization/en/JsMessages.js?v=201306210000"></script>

    <script type="text/javascript" src="/Scripts/jquery.maskMoney.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ad-gallery.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.effects.core.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.effects.blind.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.selectmenu.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.slider.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.selecttime.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ui/jquery-ui-timepicker-addon.js"></script>

    <script type="text/javascript" src="/Scripts/jquery.number_format.js?v=201208031818"></script>
    <script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>

    <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/jquery.tree/jquery.tree.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/jquery.ad-gallery.css" />


    <!--[if lt IE 8]>
    <style>
        /*body {background:none}*/
        /*
        #global-wrap .nav, #global-wrap .footer, #global-wrap .content-wrap, #global-wrap .user-nav{display:none}
        #oldb-block {display:block; margin: 0 auto;}
        */
    </style>
    <![endif]-->
    <!--[if IE]>
        <script type="text/javascript" src="/Scripts/jquery.defaultText.js?v=201208031818"></script>        
    <![endif]-->

    <!--[if lte IE 8]>
        <script type="text/javascript" src="/Scripts/excanvas.min.js"></script>    
    <![endif]--!>

    <!--[if IE 7]>
        <link href="/Content/css/ie7styles.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->
    <!--[if IE 8]>
        <link href="/Content/css/ie8styles.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->
    <!--[if IE 9]>
        <link href="/Content/css/ie9styles.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->
    <title>

    Listing Stats


    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta content="Viewed Listings Meta" />

    <meta name="keywords" content="commercial real estate marketing, commercial real estate professionals" />

    <link rel="stylesheet" type="text/css" href="/Content/css/styles-ui2.0.css?v=201310240000" />
    <script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.time.js"></script>
    <script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.selection.js"></script>
    <script language="javascript" type="text/javascript" src="/Scripts/control-chart-scripts.js"></script>


    <!--[if IE]>
        <script language="javascript" type="text/javascript">
            // Add Default Text to inputs
            $(function () {
                $.defaultText({
                    css: 'default-text' 
                });
            });    
        </script>
    <![endif]-->

    <script language="javascript" type="text/javascript">
        function CustomError() {
            $('div.validation-error').each(function () {
                var error = $(this, 'span').text();
                if (error == '')
                    $(this).hide();
                else {
                    $(this).show();
                }
            });
        }

        $(function () {
            CustomError();
            $('button').click(CustomError);
        });

        $.ajaxSetup({
            // Disable caching of AJAX responses
            cache: false
        });

        var noAjaxBlock = false;

        $(document)
            .ajaxStart(function () {
                if (!noAjaxBlock) {
                    startBlockUI();
                } else {
                    noAjaxBlock = false;
                }
            })
            .ajaxStop(function () {
                if (!noAjaxBlock) {
                    $.unblockUI();
                }
            });

    </script>
</head>
<body>
...
</body>
</html>

1 个答案:

答案 0 :(得分:3)

前几天我遇到了这个问题,this blog post用这些说明救了我:

  
      
  1. 使用Flot存储库中包含的excanvas.js(或更小的excanvas.min.js)。这个与我认为的不同,并包含必要的修改以使其起作用

  2.   
  3. 在包含Flot JavaScript文件之前包含excanvas JavaScript文件。

  4.   

确保工具 - >开发人员工具 - >浏览器模式也设置为“IE8”!