当 <base> 时，FusionCharts 无法正确呈现标签包含在 HTML 头中 [英] FusionCharts not rendering properly when <base> tag included in HTML head

问题描述

我在我的 Web 应用程序中同时使用 AngularJS 和 FusionCharts.即将发布的 AngularJS v1.3.0

解决方案:

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

我在页面头部的基本标签很简单:

解决方案

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

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

I'm using AngularJS and FusionCharts together in my web application. The upcoming release of AngularJS v1.3.0 will require there to be a <base> tag in the HTML head, so as to resolve all relative links, regardless of where the app is hosted in the site's directory.

When including the <base> tag with the latest version of FusionCharts (currently v3.4.0), the 3D charts do not render properly. For example, a 3D pie chart appears and has rotation and clickable slices, as well as tooltips and color on the inside edges of the slices. However, the entire outer color is black.

Excluding the <base> tag causes the chart to look and behave normally.

Does anyone have any idea how to resolve this? Unfortunately, I don't own the source code, otherwise I'd hack at it myself.

Here's the link to the non-working jsFiddle: http://jsfiddle.net/aaronaudic/59Bmf/207

SOLUTION:

I originally awarded the correct solution to @pankaj, because his solution of simply adding the following line at page load seemed to fix the problem:

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

However, this only works if the charts are on the initially-loaded page (when user navigates directly to page with the charts); when navigating to the page by way of something like ui-router, I was still seeing black.

The correct answer is from @Shamasis. Adding the following to the page load will fix the issue application-wide:

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

His original caveat mentioned that the export functions may be hampered from the Cloud, and this may be (I don't export from the cloud). However, exporting locally, as can be observed in this jsFiddle, works perfectly well: http://jsfiddle.net/aaronaudic/Gs6sN/14

My base tag, in the head of the page, is simply:

<base href="/">

解决方案

The issue is not primarily with FusionCharts - it is a generic SVG issue. In SVG, when gradient colour is applied on an element, it actually "refers" to another gradient element on the page. This is somewhat similar to how links can refer to hashtags using <a id="hash" /> on a page.

Now, when you are setting a <base> to the page, the references are going haywire. The gradients now refer to an element with URL as provided in your base tag.

One way to fix this is to access the internal graphics renderer and hard-set the URL to the absolute location of the page. The way to do that would be to access RedRaphael object within FusionCharts core and set the _url variable for the same.

The following code should do it for you.

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

The only caveat is that specifying absolute URL as reference to gradient elements does not work in some older browsers (I'm not sure exactly - could be Safari 5 or FF 3.0). It may also have some negative impact while exporting FusionCharts as image - the relative URLS will be invalidated when the SVG is rasterised on FusionCharts Cloud Export servers.

这篇关于当 <base> 时，FusionCharts 无法正确呈现标签包含在 HTML 头中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！