FusionCharts 无法正确呈现时<base>标签包含在 HTML 头中

Question

我在我的 Web 应用程序中同时使用AngularJS和FusionCharts 。 即将发布的 AngularJS v1.3.0将要求在 HTML head 中有一个<base>标签，以便解析所有相关链接，无论应用程序在站点目录中的何处托管。

在最新版本的 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

问题主要不在于 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 将失效。

Answer 2

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

我考虑了 Raphael 解决方法，但找不到获得eve参考的方法，所以我决定尝试删除baseHref ，这似乎是问题的“原因”。

这是我所做的：

1. 从 index.html 中删除了base （将其保留在评论中以便每个人都知道原因）并将 favicon 作为绝对资源。

    <!-- 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. 配置我的应用程序模块以注入路由器的配置（文档）

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

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

现在一切看起来都很好，所有浏览器都可以工作，Angular 路由器似乎也工作正常。

Answer 3

TLDR：设置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';解决这个问题FusionCharts.options.SVGDefinitionURL='absolute'; 在你的 JavaScript 中。 （ 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/ : http://jsfiddle.net/59Bmf/208/

在 angular 中，您可以使用控制器中的属性来绑定 url。

$scope.absurl=$location.absUrl()

并在视图中使用它

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

Answer 5

@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(/#.*?$/, '');
      });
    });
  }
}