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

问题描述

我在我的web应用程序中一起使用 AngularJS 和 FusionCharts 。即将发布的AngularJS v1.3.0

解决方案：

我最初将正确的解决方案授予@ pankaj，因为他的解决方案是在页面加载时简单添加以下行以解决问题：

$ p $ lt; code> 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（/#.*?$/，''）; 
}）; 
  

他原来的警告提到导出函数可能会受到云的阻碍，这可能是（I不要从云端导出）。然而，在本地导出，正如在这个jsFiddle中可以看到的，工作得非常好： http://jsfiddle.net / aaronaudic / Gs6sN / 14

我的基本标签位于页面的头部，简单来说就是：

 < base href =/> 
  

解决方案

这个问题主要与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导出为图像时也可能会有一些负面影响 - 在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.

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