0

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

TypeError: Object does not support property or method '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-charts 恢复到版本 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;
    };
}
4

1 回答 1

0

如果在悬停图表时导致指针事件错误，则将其添加为 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 each 循环的问题。这应该不是问题，因为根据 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-charts 正常工作，您需要在 polyfill.ts 中添加所有内容，请参见此处。

于 2019-03-26T06:41:51.417 回答