Почему метки TreeMap ngx-диаграммы не отображаются в IE11? - PullRequest
0 голосов
/ 26 марта 2019

В настоящее время я использую ngx-чарты версии 10.0.1 для построения диаграммы Treemap. Моя версия 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;
    };
}

1 Ответ

0 голосов
/ 26 марта 2019

Если при наведении на диаграмму возникает ошибка событий указателя, добавление этого в виде сценария в index.html или только в IIFE в polyfills.ts должно помочь:

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

Я также заметил проблему с каждым циклом в библиотеке. Это не должно быть проблемой, поскольку в соответствии с MDN IE11 поддерживает цикл forEach, но, сказав это, он помог добавить полизаполнение:

// 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 in index.html и в polyfills.ts снова различные пакеты core-js)

Чтобы все ngx-диаграммы работали, все, что нужно добавить в , перечислены здесь: polyfill.ts .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...