FusionCharts无法正常渲染时 标记包含在HTML头中

问题描述 投票：4回答：4

我在我的网络应用程序中一起使用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

解：

我最初为@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="/">
javascript html angularjs fusioncharts
4个回答
4
投票

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

现在，当您将<base>设置到页面时，引用将变得混乱。渐变现在引用base标记中提供的带URL的元素。

解决此问题的一种方法是访问内部图形渲染器并将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时，相对URL将失效。

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）

2
投票

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

我认为拉斐尔的解决方法，但找不到获得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">
  1. 在deployUrl上配置angular.json（参见this question）

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

    "deployUrl": "/",
  1. 配置我的app模块注入路由器的配置（docs）
import { APP_BASE_HREF } from '@angular/common'
...

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

现在一切看起来都不错，所有浏览器都能正常工作，Angular路由器似乎也运行良好。

0
投票

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

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}}">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.