ChartJS 错误0x80004005(NS_ERROR_FAILURE)计算标签大小仅适用于Firefox

x6492ojm  于 2022-11-23  发布在  Chart.js
关注(0)|答案(1)|浏览(198)

在一个Angular /离子项目中，我完全被下面的错误所迷惑。
错误：

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

错误中提到的代码行：

复制：
很抱歉，我不能给予一个plnkr演示，因为ng 2-charts启动模板根本不工作，控制台中出现404错误。要重现，只需创建一个新的Angular Ionic项目，安装ng 2-charts和chart.js，并使用以下代码：
Package ：
（我知道ng 2-charts版本相当老，但这是一个活的项目）“@angular/core”：“^14.0.0”，“离子/Angular ”：“^6.1.9”，“Chart.js”：“^2.9.4”，“ng 2-图表”：“^2.4.2”
条件：
1.这个错误只发生在Firefox中，并且破坏了整个应用程序。它在Chrome甚至Edge中都能正常工作。
1.如果我在scaleLabel和ticks选项上使用display：false，错误就会消失。
1.如果我使用[legends]=“true”，即使禁用了刻度和scaleLabel，错误也会再次出现。
于飞：

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

技术支持：

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
          }
        }
      ]
    }
  };

我的尝试：
1.更新ng 2-charts和chart.js（仅次要版本）。
1.正在将图表移出ngIf。
1.使用不同的ViewChild选项，例如静态true/false，或将其一起移除。
1.正在删除node_module并重新安装。
1.在我的项目中的不同图表上尝试相同的选项，发生相同的错误。
1.使用不同的宽度/高度值、删除它们、将它们移动到父div中等。
1.使用responsive和maintainAspectRatio选项。
1.在发生错误的地方使用chart.js代码。
我错过了什么？

chart.js

1条答案

按热度按时间
3wabscal

3wabscal1#

这是Firefox本身的一个bug。
在chart.js中有一个关于这个问题的bug报告，它在ionic中有一个bug报告，在Firefox中有一个bug报告。
因此，您需要等待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

赞(0）分享  回复(0）举报  2022-11-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com