ng2-charts和chart.js錯誤0x80004005(NS_ERROR_FAILURE)computeLabelSizes僅在Firefox中-有解無憂

在 Angular/Ionic 專案中，我完全被以下錯誤迷惑了。

錯誤：


ERROR Error: Uncaught (in promise): [Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js :: computeLabelSizes :: line 11070"  data: no]
computeLabelSizes@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11070:7
_getLabelSizes@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11730:39
fit@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11593:29
update@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11405:10
fitBoxes@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:7044:11
update@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:7254:15
updateLayout@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9503:20
update@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9460:10
construct@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9194:10
Chart@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9133:10
getChartBuilder@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:35766:12
refresh@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:35975:25
ngOnInit@http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:35307:10
callHook@http://localhost:4200/vendor.js:69461:14
callHooks@http://localhost:4200/vendor.js:69417:17
executeInitAndCheckHooks@http://localhost:4200/vendor.js:69353:14
refreshView@http://localhost:4200/vendor.js:80656:35
refreshComponent@http://localhost:4200/vendor.js:81937:18
refreshChildComponents@http://localhost:4200/vendor.js:80369:21
refreshView@http://localhost:4200/vendor.js:80706:29
refreshComponent@http://localhost:4200/vendor.js:81937:18
refreshChildComponents@http://localhost:4200/vendor.js:80369:21
refreshView@http://localhost:4200/vendor.js:80706:29
detectChangesInternal@http://localhost:4200/vendor.js:82097:16
detectChanges@http://localhost:4200/vendor.js:82689:26
setActive@http://localhost:4200/vendor.js:6023:42
activateWith@http://localhost:4200/vendor.js:7170:20
activateRoutes@http://localhost:4200/vendor.js:117943:28
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
activateChildRoutes@http://localhost:4200/vendor.js:117886:25
activateRoutes@http://localhost:4200/vendor.js:117950:14
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
activateChildRoutes@http://localhost:4200/vendor.js:117886:25
activateRoutes@http://localhost:4200/vendor.js:117946:16
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
activateChildRoutes@http://localhost:4200/vendor.js:117886:25
activateRoutes@http://localhost:4200/vendor.js:117950:14
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
activateChildRoutes@http://localhost:4200/vendor.js:117886:25
activate@http://localhost:4200/vendor.js:117787:10
activateRoutes/<@http://localhost:4200/vendor.js:117770:99
_next@http://localhost:4200/vendor.js:25460:29
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:26324:22
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:25466:22
next@http://localhost:4200/vendor.js:23721:12
notifyNext@http://localhost:4200/vendor.js:26033:22
_next@http://localhost:4200/vendor.js:24179:17
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:25466:22
next@http://localhost:4200/vendor.js:23721:12
subscribeToArray/<@http://localhost:4200/vendor.js:27123:16
_trySubscribe@http://localhost:4200/vendor.js:23252:19
subscribe@http://localhost:4200/vendor.js:23234:172
call@http://localhost:4200/vendor.js:25443:19
subscribe@http://localhost:4200/vendor.js:23232:25
innerSubscribe@http://localhost:4200/vendor.js:24250:19
_innerSub@http://localhost:4200/vendor.js:26001:93
_next@http://localhost:4200/vendor.js:25988:10
next@http://localhost:4200/vendor.js:23721:12
notifyNext@http://localhost:4200/vendor.js:26033:22
_next@http://localhost:4200/vendor.js:24179:17
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:25466:22
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:26094:24
next@http://localhost:4200/vendor.js:23721:12
_complete@http://localhost:4200/vendor.js:25164:24
complete@http://localhost:4200/vendor.js:23737:12
_complete@http://localhost:4200/vendor.js:24547:24
complete@http://localhost:4200/vendor.js:23737:12
subscribeToArray/<@http://localhost:4200/vendor.js:27126:14
_trySubscribe@http://localhost:4200/vendor.js:23252:19
subscribe@http://localhost:4200/vendor.js:23234:172
call@http://localhost:4200/vendor.js:24524:19
subscribe@http://localhost:4200/vendor.js:23232:25
call@http://localhost:4200/vendor.js:25145:19
subscribe@http://localhost:4200/vendor.js:23232:25
call@http://localhost:4200/vendor.js:26077:19
subscribe@http://localhost:4200/vendor.js:23232:25
call@http://localhost:4200/vendor.js:25443:19
subscribe@http://localhost:4200/vendor.js:23232:25
innerSubscribe@http://localhost:4200/vendor.js:24250:19
_innerSub@http://localhost:4200/vendor.js:26001:93
_next@http://localhost:4200/vendor.js:25988:10
next@http://localhost:4200/vendor.js:23721:12
notifyNext@http://localhost:4200/vendor.js:26033:22
_next@http://localhost:4200/vendor.js:24179:17
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:25466:22
next@http://localhost:4200/vendor.js:23721:12
_next@http://localhost:4200/vendor.js:26324:22
next@http://localhost:4200/vendor.js:23721:12
notifyNext@http://localhost:4200/vendor.js:26033:22
_next@http://localhost:4200/vendor.js:24179:17

錯誤中提到的代碼行：

ng2-charts 和 chart.js 錯誤 0x80004005 (NS_ERROR_FAILURE) computeLabelSizes 僅在 Firefox 中

復制：

抱歉，我無法提供 plnkr 演示，因為 ng2-charts 起始模板根本不起作用，控制臺中出現 404 錯誤。要重現，只需創建一個新的 Angular Ionic 專案，安裝 ng2-charts 和 chart.js 并使用以下代碼：

包裝：

（我知道 ng2-charts 版本很舊，但這是一個實時專案）“@angular/core”：“^14.0.0”，“@ionic/angular”：“^6.1.9”，“chart.js” : "^2.9.4", "ng2-charts": "^2.4.2"

條件：

該錯誤僅發生在 Firefox 中，并破壞了整個應用程式。它在 Chrome 甚至 Edge 中運行良好。
如果我在 scaleLabel 和 ticks 選項上使用 display:false，錯誤就會消失。
如果我使用 [legends]="true"，即使刻度和 scaleLabel 被禁用，錯誤也會再次出現。

HTML：


<div id="container">
  <div>
    <canvas
      baseChart
      width="300"
      height="300"
      [datasets]="previewChartData"
      [options]="previewChartOptions"
      [legend]="false"
      [chartType]="'line'"
    ></canvas>
  </div>
</div>

TS：


  public previewChartData = [
    {
      data: [
        {
          title: 'Title',
          x: 10,
          y: 20
        }
      ]
    }
  ];
  public previewChartOptions = {
    scales: {
      xAxes: [
        {
          type: 'linear',
          scaleLabel: {
            display: true,
            labelString: 'asd'
          },
          ticks: {
            display: true
          }
        }
      ],
      yAxes: [
        {
          type: 'linear',
          scaleLabel: {
            display: true,
            labelString: 'qwe'
          },
          ticks: {
            display: true
          }
        }
      ]
    }
  };

我嘗試了什么：

更新 ng2-charts 和 chart.js（僅次要版本）。
將圖表移出 ngIf。
使用不同的 ViewChild 選項，例如靜態真/假，或將其全部洗掉。
洗掉 node_modules 并重新安裝。
在我的專案中的不同圖表上嘗試相同的選項，發生同樣的錯誤。
使用不同的寬度/高度值，洗掉它們，將它們移動到父 div 等。
使用回應和維護AspectRatio 選項。
使用發生錯誤的 chart.js 代碼。

我錯過了什么？

uj5u.com熱心網友回復：

這是 Firefox 本身的一個錯誤。

在chart.js 中有一個關于此的錯誤報告，它允許在離子中的錯誤報告，它允許在Firefox 本身中的錯誤報告。

因此，您需要等到 Firefox 對此進行修復或不在您呈現圖表的頁面上使用 ionic

https://github.com/chartjs/Chart.js/issues/10720

https://github.com/ionic-team/ionic-framework/issues/26039

https://bugzilla.mozilla.org/show_bug.cgi?id=1792860

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531738.html

標籤：离子框架火狐图表.jsng2-图表

上一篇：如何在Flutter中獲取時間為零的DateTime

下一篇：單擊“閱讀更多”鏈接時，Firefox會向下移動滾動條