当HTML头中包含<base />标记时，FusionCharts无法正确呈现

Question

我在我的网络应用程序中一起使用AngularJS和FusionCharts。即将发布的AngularJS v1.3.0 will require there to be a <base> tag in the HTML head，以解决所有相关链接，无论应用程序在网站目录中的位置如何。

将<base>标记与最新版本的FusionCharts（目前为v3.4.0）包含在一起时，3D图表无法正常渲染。例如，将出现一个3D饼图，其中包含旋转和可单击的切片，以及切片内边缘上的工具提示和颜色。但是，整个外部颜色为黑色。

排除<base>标记会导致图表的外观和行为正常。

有谁知道如何解决这个问题？不幸的是，我不拥有源代码，否则我自己就会破解它。

这里是指向不工作的jsFiddle的链接：http://jsfiddle.net/aaronaudic/59Bmf/207

SOLUTION：

我最初为@pankaj授予了正确的解决方案，因为他在页面加载时简单添加以下行的解决方案似乎解决了这个问题：

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

但是，这仅适用于图表位于最初加载的页面上的情况（当用户直接导航到带有图表的页面时）;当通过类似ui-router的方式导航到页面时，我仍然看到黑色。

正确答案来自@Shamasis 。将以下内容添加到页面加载将解决应用程序范围内的问题：

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

他最初的警告提到导出功能可能会受到云的阻碍，这可能是（我不会从云端导出）。但是，如本jsFiddle中所观察到的，本地导出非常有效：http://jsfiddle.net/aaronaudic/Gs6sN/14

我的基本标记位于页面的头部，简单地说是：

<base href="/">

Answer 1

问题主要不在于FusionCharts - 这是一个通用的SVG问题。在SVG中，当渐变颜色应用于元素时，它实际上是＆＃34;指的是＆＃34;到页面上的另一个渐变元素。这有点类似于链接在页面上使用<a id="hash" />引用主题标签的方式。

现在，当您向页面设置<base>时，引用将变得混乱。渐变现在引用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导出为图像时也可能会产生一些负面影响 - 当在FusionCharts Cloud Export服务器上对SVG进行栅格化时，相对URLS将无效。

Answer 2

TLDR：在JavaScript中设置FusionCharts.options.SVGDefinitionURL='absolute';以解决此问题

<强>详细说明：

有一个FusionChart解决方案。

你提到的问题来自SVG使用相对引用渐变等因素，由于标记存在而导致错误解析。

https://github.com/angular/angular.js/issues/8934上描述了此问题。 一种可能的解决方案是设置$locationProvider.html5Mode({ enabled: true, requireBase: false });并使用绝对路径。

虽然这确实解决了问题，但FusionCharts通过在JavaScript中设置FusionCharts.options.SVGDefinitionURL='absolute';来解决问题。 （http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-properties.html#FusionCharts.options-attributes-SVGDefinitionURL）

Answer 3

我正在这里在Angular 7和FusionCharts上解决此问题，FusionCharts.options.SVGDefinitionURL='absolute'并没有太大帮助。它修复了Safari，但只是在饼图的第一条路线上。任何进一步的导航都将再次中断，现在，Chrome在导航后也将中断。

我考虑了Raphael的解决方法，但找不到找到eve引用的方法，因此我决定尝试删除baseHref，这似乎是问题的“原因”

这是我所做的：

1. 从index.html中删除了base（在此处留有注释，以便大家都知道原因），并将该图标作为绝对资源。

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

1. 在deployUrl上配置了angular.json（请参阅this question）

我在这里使用多个项目布局，因此对我来说，它是在路径projects.my-project.architect.build.options.deployUrl中添加的，在默认项目中应该更简单。

    "deployUrl": "/",

1. 将我的应用程序模块配置为注入路由器（docs）的配置

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

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

现在一切都看起来不错，所有浏览器都可以运行，Angular路由器也可以正常运行。

Answer 4

您只需在基本标记中设置绝对网址

即可

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

这是jsfiddle：http://jsfiddle.net/59Bmf/208/

在角度中，您可以使用控制器中的属性绑定网址。

$scope.absurl=$location.absUrl()

在视图中使用

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

Answer 5

@Shamasis Bhattacharya救了我的命。

此解决方案解决了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(/#.*?$/, '');
      });
    });
  }
}