Fusioncharts餅圖無填充顏色
[英]Fusioncharts Pie Chart No Fill Color
問題描述
我使用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 wrt 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"
1 個解決方案
解決方案1
0 已采納 2016-08-08 04:35:01
問題是由於HTML標頭中使用了base標簽。
正如解釋在這里 ：
問題主要不是與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 wrt percentage of total visits. --> <head> <base href="/"> </head> <div id="chart-container">FusionCharts will render here</div>
希望這可以幫助。
FusionCharts-在Column2D圖表中單擊時更改條形的顏色
[英]FusionCharts- changing the color of a bar on click in Column2D chart
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.