Fusioncharts 원형 차트 채우기 색상 없음

융합 차트를 사용하여 다음 fiddle을 만들었습니다. 차트의 채우기 색상이 왜 투명한지 이해할 수 없습니다. 샘플에 대한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>  <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에서 그라디언트 색상이 요소에 적용되면 실제로 페이지의 다른 그라디언트 요소를 "참조"합니다. 이는 링크가 페이지에서 사용하는 해시 태그를 참조하는 방법과 다소 비슷합니다.

이제 페이지를로 설정하면 참조 번호는 건초 더미가됩니다. 이제 그라디언트는 기본 태그에 제공된 URL이 인 요소를 참조합니다.

그럼에도 불구하고 FusionCharts는 이에 대한 해결책을 제공합니다. 'FusionCharts.options.SVGDefinitionURL ='절대 ';'를 사용하십시오. 귀하의 자바 스크립트 코드 에서이 문제를 해결할 수 있습니다. 당신은이 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>

희망을.

출처

2016-08-08 04:35:01 Ayan

@Ayan에게 감사의 말을 전하고 문제를 지적하면 정말로 나를 구해 냈습니다. 이제 문제의 원인이 내 html의 기본 태그라는 것을 알고 있습니다. 이제 각도 컨트롤러에 다음 코드를 추가하여 angularjs를 구현할 수 있습니다. 'code eve.on ('raphael.new', function() { this.raphael._url = this.raphael._g.win. location.href.replace (/#.*?$/, ''); }); ' –

하하, 트레드를 엉망으로 만들었습니다. 여기에 새 소식, 사과드립니다. ( –

Fusioncharts 원형 차트 채우기 색상 없음

답변

관련 문제