我使用Fusioncharts创建了以下小提琴。我不明白为什么图表的填充颜色是透明的。
该示例的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"
问题是由于base
在HTML头中使用了标签。
正如解释在这里:
问题主要不是与FusionCharts有关,而是一个通用的SVG问题。在SVG中,将渐变色应用于元素时,它实际上是“引用”页面上的另一个渐变元素。这有点类似于链接如何使用页面上的#标签。
现在,当您在页面上设置a时,引用变得混乱了。现在,渐变引用的是基本标记中提供的具有URL的元素。
尽管如此,FusionCharts为此提供了一个解决方案。使用'FusionCharts.options.SVGDefinitionURL ='absolute';' 在您的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>
希望这可以帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句