FusionCharts не отображается должным образом, когда тег ‹base› включен в заголовок HTML

Проблема в первую очередь не в FusionCharts - это общая SVG проблема. В SVG, когда цвет градиента применяется к элементу, он фактически «относится» к другому элементу градиента на странице. Это несколько похоже на то, как ссылки могут ссылаться на хэштеги, использующие <a id="hash" /> на странице.

Теперь, когда вы устанавливаете <base> на страницу, ссылки становятся халявными. Теперь градиенты относятся к элементу с URL-адресом, указанным в вашем теге base.

Один из способов исправить это - получить доступ к внутреннему средству визуализации графики и жестко установить URL-адрес на абсолютное местоположение страницы. Для этого нужно обратиться к объекту RedRaphael в ядре FusionCharts и установить для него переменную _url.

Следующий код должен сделать это за вас.

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

Единственное предостережение: указание абсолютного URL-адреса в качестве ссылки на элементы градиента не работает в некоторых старых браузерах (я не уверен точно - это может быть Safari 5 или FF 3.0). Это также может иметь некоторые негативные последствия при экспорте FusionCharts как изображения - относительные URL-адреса будут недействительными, когда SVG будет растеризован на серверах экспорта FusionCharts Cloud.

Я исправляю эту проблему на Angular 7 и FusionCharts здесь, FusionCharts.options.SVGDefinitionURL='absolute' мало помогло. Он исправил Safari, но только на первом маршруте с круговыми диаграммами. Любая дальнейшая навигация снова сломалась, и теперь Chrome также ломается после навигации.

Я рассмотрел обходной путь Рафаэля, но не смог найти способ получить eve ссылку, поэтому решил попробовать удалить baseHref, который, кажется, является «причиной» проблемы.

Вот что я сделал:

1. Удалил base из index.html (оставил там комментарий, чтобы все знали почему), а также поместил значок в качестве абсолютного ресурса.

    <!-- Configuring deployUrl and APP_BASE_HREF in the main module, 
         see [[this stackoverflow link]] -->
    <!--<base href="/">-->
    ...
    <link rel="icon" type="image/x-icon" href="/favicon.ico">

2. Настроен deployUrl на angular.json (см. этот вопрос)

Здесь я использую макет нескольких проектов, поэтому для меня он был добавлен по пути projects.my-project.architect.build.options.deployUrl, что должно быть проще в проекте по умолчанию.

    "deployUrl": "/",

3. Настроил модуль моего приложения для внедрения конфигурации для маршрутизатора (docs)

import { APP_BASE_HREF } from '@angular/common'
...

@NgModule({
    ...
    providers: [
        { provide: APP_BASE_HREF, useValue: '/' },
        ...
    ],
    ...
})

Сейчас все выглядит хорошо, все браузеры работают, роутер Angular вроде тоже работает нормально.

TL; DR: установите FusionCharts.options.SVGDefinitionURL='absolute'; в своем JavaScript, чтобы решить эту проблему.

Подробно:

Для этого есть решение FusionChart.

Упомянутая вами проблема возникает из-за использования SVG относительных ссылок на такие вещи, как градиенты, которые разрешаются неправильно из-за наличия тега.

Эта проблема описана на странице https://github.com/angular/angular.js/issues/8934. Одно из возможных решений - установить $locationProvider.html5Mode({ enabled: true, requireBase: false }); и использовать абсолютные пути.

Хотя это действительно решает проблему, есть решение FusionCharts, установив FusionCharts.options.SVGDefinitionURL='absolute'; в вашем JavaScript. (http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-properties.html#FusionCharts.options-attributes-SVGDefinitionURL)

Вы можете просто установить абсолютный URL-адрес в базовом теге

document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);

Вот jsfiddle: http://jsfiddle.net/59Bmf/208/

В angular вы можете использовать привязку URL-адреса, используя свойство в контроллере.

$scope.absurl=$location.absUrl()

И использовать его изнутри

<base href="{{absurl}}">

@ Шамасис Бхаттачарья спас мне жизнь.

Это решение решило мою проблему с fusioncharts в проекте Ionic4 + Angular8.

Вот что я сделал в компоненте app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

declare var eve;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor() {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      eve.on('raphael.new', function() {
        this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
      });
    });
  }
}