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