当标签未激活时，FusionCharts图形不是呈现 - Angular

Question

编辑： 现在，我通过为图形组件添加 *ngIf 条件来正确获取数据。但是，图表被渲染，没有得到任何填充颜色。获取的填充网址是

fill="url('http://localhost:4200/#rr-1272-xr___89_110_110__rgba_118_193_134_0.9__78-rgba_118_193_134_0.9__89')"

旧：（找到解决方案） 在我的应用程序中，FusionCharts图表在选项卡未激活时不会呈现。即使选项卡处于活动状态，图形也不会呈现。显示No data to display消息如下

HTML：

<section class="">
        <!-- fusion chart starts here -->
            <fusioncharts   width="220" height="220" type="doughnut2d"
                [dataSource]="dataSource" dataFormat="json" SVGDefinitionURL='absolute'>
            </fusioncharts>
        <!-- fusion chart ends here -->
</section>

组件：

let xyz = {
    chart: {
        "bgColor": "#ffffff",
        "startingAngle": "310",
        "showLegend": "0",
        "defaultCenterLabel": this.returnValue(this.chartData) + "\n" + "Total",
        // "centerLabel": "$value" + "\n" + "$label",
        "centerLabelBold": "0",
        "showTooltip": "0",
        "theme": "fusion",
        "minAngleForValue": "75",
        "enablesmartLabel": "0",
        "showLabels": "0",
        "showValues": "0",
        "enableMultiSlicing": "0",
        "showBorder": "0",
        "showPlotBorder": "1",
        "plotBorderColor": "#ffffff",
        "plotBorderThickness": "5",
        // "legendPosition": "RIGHT",
        "doughnutRadius": "70",
        "paletteColors": "#6C7DED,#3CA653,#FFAB27,#3AC9E9,#6C7DED,#0C8455,#FDCF12,#76E4FC",
        "animateClockwise": "0",
        "chartLeftMargin": "0",
        "chartRightMargin": "0",
        "chartTopMargin": "0",
        "chartBottomMargin": "0",
        "captionPadding": "0",
        "slicingDistance": "0",
        "plotHoverEffect": "1",
        "centerLabelFontSize": "20",
        "centerLabelFont": "DroidSans",
        "centerLabelColor": "#222222",
    },
    data: [
        {
            "label": "Pilot",
            "id": "Pilot",
            "value": 5,
            "color": "#3CA653",
            "link": "studies?studies-by-phase=Pilot"
        },
        {
            "label": "Pivotal",
            "id": "Pivotal",
            "value": 2,
            "color": "#FFAB27",
            "link": "studies?studies-by-phase=Pivotal"
        },
        {
            "label": "Phase 1",
            "id": "Phase 1",
            "value": 4,
            "color": "#3AC9E9",
            "link": "studies?studies-by-phase=Phase 1"
        },
        {
            "label": "Phase 2",
            "id": "Phase 2",
            "value": 3,
            "color": "#6C7DED",
            "link": "studies?studies-by-phase=Phase 2"
        }
    ]
};
this.dataSource = { ...xyz };

请帮我解决这个问题。

谢谢...

Answer 1

在 module.ts 文件中添加 SVGDefinitionURL 作为绝对地址，而不是在 component.html 中添加

FusionCharts.options['SVGDefinitionURL'] = absolute;