当选项卡未处于活动状态时，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 图表不会呈现。即使选项卡处于活动状态，图形也不会呈现。显示无数据可显示消息如下

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;

Answer 2

每当您重新加载页面并将其切换到下一个选项卡，然后当页面在重新访问该页面时重新加载时，图表都会显示动画，这是因为当您打开时位于另一个选项卡上时，视口不可见包含图表的选项卡会进入活动状态并以这种方式动画，如果您不希望图表在刷新后重新访问选项卡时动画，请将图表级别的动画属性设置为 0。

正如这里所解释的：

问题并非主要与 FusionCharts 相关 - 这是一个通用的 SVG 问题。在 SVG 中，当渐变颜色应用于某个元素时，它实际上“引用”页面上的另一个渐变元素。这有点类似于链接如何引用页面上使用的主题标签。

现在，当您为页面设置 a 时，引用就会变得混乱。渐变现在引用标签中提供的带有 URL 的元素。

使用此代码修复 -

FusionCharts.options.SVGDefinitionURL='absolute';