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

Question

我在我的网络应用程序中同时使用AngularJS 和FusionCharts。即将发布的 AngularJS v1.3.0 will require there to be a <base> tag in the HTML head，以便解析所有相关链接，无论应用托管在站点目录的哪个位置。

在最新版本的 FusionCharts（当前为 v3.4.0）中包含 <base> 标签时，3D 图表无法正确渲染。例如，一个 3D 饼图出现并具有旋转和可点击的切片，以及切片内边缘的工具提示和颜色。不过整个外层颜色都是黑色的。

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

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

这是非工作 jsFiddle 的链接：http://jsfiddle.net/aaronaudic/59Bmf/207

解决方案：

我最初将正确的解决方案授予@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

@Shamasis Bhattacharya 救了我的命。

这个解决方案解决了我在 Ionic4+Angular8 项目中的 fusioncharts 问题。

这就是我在 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(/#.*?$/, '');
      });
    });
  }
}

Answer 2

我在 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. 在angular.json 上配置deployUrl（参见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 3

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 4

你可以简单地在基本标签中设置绝对网址

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

Answer 5

这个问题主要不在于 FusionCharts - 它是一个通用的SVG 问题。在SVG 中，当在一个元素上应用渐变颜色时，它实际上“引用”了页面上的另一个渐变元素。这有点类似于链接如何在页面上使用<a id="hash" /> 来引用主题标签。

现在，当您为页面设置<base> 时，引用会变得混乱。渐变现在指的是具有您的base 标记中提供的 URL 的元素。

解决此问题的一种方法是访问内部图形渲染器并将 URL 硬设置为页面的绝对位置。这样做的方法是访问FusionCharts 核心内的RedRaphael 对象，并将_url 变量设置为相同。

下面的代码应该会为你做。

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

唯一需要注意的是，将绝对 URL 指定为对渐变元素的引用在某些较旧的浏览器中不起作用（我不确定——可能是 Safari 5 或 FF 3.0）。在将 FusionCharts 导出为图像时，它也可能产生一些负面影响 - 当 SVG 在 FusionCharts Cloud Export 服务器上光栅化时，相对 URL 将失效。