在 Angular 11 中将 "useHash:true" 添加到 RouterConfig 到 RouterModule 后，ApexCharts 的面积图变为折线图

Question

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

在 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 后的顶点面积图:

Answer 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('#'))}`);
            });
    }

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

在 Angular 11 中将 "useHash:true" 添加到 RouterConfig 到 RouterModule 后，ApexCharts 的面积图变为折线图

ApexCharts' Area Chart become Line Chart after I add "useHash:true" to routerConfig to RouterModule in Angular 11

angular

angular-routing

apexcharts