Question

我目前正在使用ngx-charts版本10.0.1绘制树形图。我的Angular版本是7.2.1。它在Chrome中按预期运行，但标签未在IE11中显示。在页面加载时，我在IE控制台中看到以下错误：

TypeError：对象不支持属性或方法“ forEach” （注意：我正在编写forEach循环以处理来自后端的数据，我也尝试将其转换为普通的for循环，但并不能解决问题。）

TypeError：无法设置未定义或空引用的属性“指针事件”。

与Chrome相比，悬停和单击操作时的动画非常慢。我可以在工具提示上看到标签和值。

到目前为止我一直尝试的事情：-

1）我看到的论坛很少，并安装了classlist.js，并在Index.html中包含以下链接

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/classlist.js/classList.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

2）我还添加了animations.js并安装了它。 3）尝试将ngx图恢复为8.1.0版。

但是上述技术似乎都无法解决问题。

下面是我的Polyfills.ts文件中的代码：

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/client/shim';
import "isomorphic-fetch";
import 'core-js/es6';
import 'core-js/es7/array';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');


if (typeof SVGElement.prototype.contains == 'undefined') {
    SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}

if (!Element.prototype.matches) {
    Element.prototype.matches =                     
(<any>Element.prototype).msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

import 'classlist.js';  

import 'web-animations-js'; 

import 'zone.js/dist/zone'; 

(window as any).global = window;
if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}

Answer 1

如果将鼠标悬停在图表上时导致指针事件错误，则将其添加为index.html中的脚本或polyfills.ts中的IIFE应该可以：

    <script>
        (function (window) {
            try {
                new MouseEvent('test');
                return false; // No need to polyfill
            } catch (e) {
                // Need to polyfill - fall through
            }

            // Polyfills DOM4 MouseEvent

            var MouseEvent = function (eventType, params) {
                params = params || { bubbles: false, cancelable: false };
                var mouseEvent = document.createEvent('MouseEvent');
                mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

                return mouseEvent;
            }

            MouseEvent.prototype = Event.prototype;

            window.MouseEvent = MouseEvent;
        })(window);
    </script>

我还注意到库中for每个循环的问题。由于according to MDN IE11支持forEach循环，所以这不应该成为问题，但有了这个，它有助于添加polyfill：

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this === null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k < len
    while (k < len) {

      var kValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as the this value and
        // argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined
  };
}

修改

如果这没有帮助，最好删除所有导入，因为您的问题可能与导入不必要的内容（d3，...）或两次导入（例如shim.min.js在index.html和polyfills.ts中再次使用各种core-js软件包）

要使ngx图表正常工作，您需要添加polyfill.ts is listed here。

为什么ngx-chart TreeMap标签未在IE11中显示？

1 个答案: