Fusioncharts饼图无填充颜色

I have created the following fiddle using fusioncharts. I am unable to understand why the fill colour of the chart is transparent.

我使用fusioncharts创建了以下小提琴。我无法理解为什么图表的填充颜色是透明的。

An HTML snippet for the sample:

示例的HTML代码段:

FusionCharts.ready(function() {
  var demographicsChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Age profile of website visitors",
        "subCaption": "Last Year",
        "startingAngle": "120",
        "showLabels": "0",
        "showLegend": "1",
        "enableMultiSlicing": "0",
        "slicingDistance": "15",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "plotTooltext": "Age group : $label<br>Total visit : $datavalue",
        "theme": "fint"
      },
      "data": [{
        "label": "Teenage",
        "value": "1250400"
      }, {
        "label": "Adult",
        "value": "1463300"
      }, {
        "label": "Mid-age",
        "value": "1050700"
      }, {
        "label": "Senior",
        "value": "491000"
      }]
    }
  });
  demographicsChart.render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<!-- A pie3D Chart showing percentage visiting for different age groups last year in Harry's Supermart website. Attribute : # showPercentValues set to 1 to show the values w.r.t percentage of total visits. -->

<head>
  <base href="/">
</head>
<div id="chart-container">FusionCharts will render here</div>

Using the following chart level attributes:

使用以下图表级别属性:

"caption": "Age profile of website visitors",
"subCaption": "Last Year",
"startingAngle": "120",
"showLabels": "0",
"showLegend": "1",
"enableMultiSlicing": "0",
"slicingDistance": "15",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"plotTooltext": "Age group : $label<br>Total visit : $datavalue",
"theme": "fint"

1 个解决方案

#1

The problem is due to the usage of base tag in HTML head.

问题是由于HTML头中使用了基本标记。

As explained here:

如下所述:

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 on a page.

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

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

现在,当您设置页面时,引用将变得混乱。渐变现在引用基础标记中提供的URL元素。

Nevertheless FusionCharts provides a solution for this. Use 'FusionCharts.options.SVGDefinitionURL='absolute';' in your javascript code to fix this. You might refer to the this fiddle or check the snippet below:

然而,FusionCharts为此提供了解决方案。使用'FusionCharts.options.SVGDefinitionURL ='绝对';'在你的JavaScript代码中解决这个问题。你可以参考这个小提琴或检查下面的代码:

FusionCharts.ready(function() {
  FusionCharts.options.SVGDefinitionURL = 'absolute';
  var demographicsChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Age profile of website visitors",
        "subCaption": "Last Year",
        "startingAngle": "120",
        "showLabels": "0",
        "showLegend": "1",
        "enableMultiSlicing": "0",
        "slicingDistance": "15",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "plotTooltext": "Age group : $label<br>Total visit : $datavalue",
        "theme": "fint"
      },
      "data": [{
        "label": "Teenage",
        "value": "1250400"
      }, {
        "label": "Adult",
        "value": "1463300"
      }, {
        "label": "Mid-age",
        "value": "1050700"
      }, {
        "label": "Senior",
        "value": "491000"
      }]
    }
  });
  demographicsChart.render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- A pie3D Chart showing percentage visiting for different age groups last year in Harry's Supermart website. Attribute : # showPercentValues set to 1 to show the values w.r.t percentage of total visits. -->

<head>
  <base href="/">
</head>
<div id="chart-container">FusionCharts will render here</div>

Hope this helps.

希望这可以帮助。

#1