Fusioncharts饼图无填充颜色

Question

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

示例的 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>

使用以下图表级别属性：

"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"

Answer 1

问题是由于在 HTML 头部使用了 base 标签。

如解释的那样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.

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.

不过FusionCharts为此提供了解决方案。使用'FusionCharts.options.SVGDefinitionURL='absolute';'在您的 javascript 代码中解决此问题。您可以参考此 fiddle 或查看以下代码段：

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>

希望这对您有所帮助。

Fusioncharts饼图无填充颜色

Fusioncharts Pie Chart No Fill Color

javascript

charts

pie-chart

fusioncharts