フュージョンチャート円グラフなし塗りつぶし色なし

フュージョンチャートを使用して次のように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>  <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"

出典

2016-08-08 Noob Wizard

問題がbaseタグの使用によるものですHTMLの頭の中で。

としてはhereを説明した：

問題はFusionChartsのに主にではない - それは、一般的なSVGの問題です。 SVGでは、グラデーションカラーが要素に適用されると、実際にページ上の別のグラデーション要素を「参照」します。これは、リンクがページ上で使用するハッシュタグをどのように参照できるかとやや似ています。

ここでaをページに設定すると、リファレンスは haywireになります。グラデーションでは、ベースタグにURLがと指定された要素が参照されます。

しかし、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>

：あなたはこのfiddleを参照するか、以下のスニペットを確認することがあります。

出典

2016-08-08 04:35:01 Ayan

編集のための@Ayanと問題を指摘して、あなたは本当に私を救った。今私は、問題の原因が自分のhtmlのベースタグであることを知っています。私は今、角度コントローラに次のコードを追加することで、anglejsを実装することができます： 'code eve.on（ 'raphael.new'、function（）{ this.raphael._url = this.raphael._g.win。 location.href.replace（/#.*?$/、 ''）; }）; ' –

こんにちは、こんにちは、私はここで新しい、私の謝罪： –

フュージョンチャート円グラフなし塗りつぶし色なし

答えて

関連する問題