在我将“useHash：true”添加到routerConfig到Angular 11中的RouterModule后，ApexCharts的面积图变为折线图答案

【问题标题】：ApexCharts' Area Chart become Line Chart after I add "useHash:true" to routerConfig to RouterModule in Angular 11在我将“useHash：true”添加到routerConfig到Angular 11中的RouterModule后，ApexCharts的面积图变为折线图
【发布时间】：2021-04-05 01:37:50
【问题描述】：

我的 ApexCharts 面积图工作正常，直到我将“useHash:true”添加到 routerConfig 并且我的面积图变成折线图。

在 routerConfig 中使用“useHash:true”时如何恢复我的面积图？

package.json 的摘录

{
"dependencies": {
    "apexcharts": "3.22.2",
    "ng-apexcharts": "1.5.6",
},
"devDependencies": {
    "@angular-devkit/build-angular": "0.1100.0",
    "@angular/cli": "11.0.0",
    "@angular/compiler-cli": "11.0.0",
    "@angular/language-service": "11.0.0",
}

}

app.module.ts 的摘录

const routerConfig: ExtraOptions = {
    scrollPositionRestoration: 'enabled',
    preloadingStrategy       : PreloadAllModules,
    relativeLinkResolution   : 'legacy',
    useHash:true
};

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports     : [
        BrowserModule,
        BrowserAnimationsModule,

        // Layout
        LayoutModule,

        RouterModule.forRoot(appRoutes, routerConfig),
    ],
    bootstrap   : [
        AppComponent
    ]
})
export class AppModule
{
}

home.component.html 的摘录

<apx-chart class="w-full h-30" [chart]="chartData.chart" [colors]="chartData.colors"
        [series]="chartData.series" [stroke]="chartData.stroke" [tooltip]="chartData.tooltip"
        [xaxis]="chartData.xaxis" [yaxis]="chartData.yaxis"></apx-chart>

home.component.ts 的摘录

chartData = {
  chart: {
      animations: {
          enabled: true
      },
      fontFamily: 'inherit',
      foreColor: 'inherit',
      height: '100%',
      type: 'area',
      sparkline: {
          enabled: true
      }
  },
  colors: ['#98E0AC'],
  series: [
      {
          name: dataName,
          data: data
      }
  ],
  stroke: {
      curve: 'smooth'
  },
  tooltip: {
      theme: 'dark'
  },
  xaxis: {
      type: 'category',
      categories: labels
  },
  yaxis: {
      labels: {
          formatter: (val) => {
              return val.toString();
          }
      }
  }
}

将“useHash:true”添加到routerConfig之前的顶点面积图：

将“useHash:true”添加到routerConfig后的顶点面积图：

【问题讨论】：

标签： angular angular-routing apexcharts

【解决方案1】：

似乎这不是一般性问题，但这是我在 Envato 市场使用的模板的问题。我在我的 home.component.ts 中找到了这段代码，这是上述问题的根本原因：

home.component.ts 的摘录

   OnInit(){
        // Attach SVG fill fixer to all ApexCharts
        window['Apex'] = {
            chart: {
                events: {
                    mounted: (chart: any, options?: any) => {
                        this._fixSvgFill(chart.el);
                    },
                    updated: (chart: any, options?: any) => {
                        this._fixSvgFill(chart.el);
                    }
                }
            }
        }
    }

   private _fixSvgFill(element: Element): void {
        // Current URL
        const currentURL = this._router.url;

        // 1. Find all elements with 'fill' attribute within the element
        // 2. Filter out the ones that doesn't have cross reference so we only left with the ones that use the 'url(#id)' syntax
        // 3. Insert the 'currentURL' at the front of the 'fill' attribute value
        Array.from(element.querySelectorAll('*[fill]'))
            .filter((el) => el.getAttribute('fill').indexOf('url(') !== -1)
            .forEach((el) => {
                const attrVal = el.getAttribute('fill');
                el.setAttribute('fill', `url(${currentURL}${attrVal.slice(attrVal.indexOf('#'))}`);
            });
    }

只需删除这些代码，图表就会正常工作。在这里写下来以防万一有人遇到同样的问题。

【讨论】：