添加 X 轴标题会导致 Uncaught RangeError:minimumFractionDigits value is out of range in Chart.js

2024-05-03

我正在尝试向 Chart.js 图表的 X 轴添加标题,但是当我将标题属性放在 x 轴上时,出现错误 Uncaught RangeError:minimumFractionDigits value is out of range,但它并没有如果我向 Y 轴添加标题,就会发生这种情况。

仅当我添加标题属性时才会出现问题,如果将其删除,图表将完美运行。

grafica_roi = new Chart($('#grafica_roi'), {
    type: 'bar',
    data: {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25'],
        datasets: [{
            //label: 'Beneficio obtenido',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            backgroundColor: '#F0A202'
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    font: {
                        size:function(context) {
                            var width = context.chart.width;
                            
                            if(width<=320) {
                                size = 12;
                            }
                            else {
                                if(width>320 && width<600) {
                                    size = 16;
                                }
                                else {
                                    size = 20;
                                }
                            }
                            //var size = Math.round(width / 32);

                            return size;
                        },
                        weight: "bold"
                    }
                },
                grid: {
                    display: false
                },
                title: {
                    text: 'Ahorro',
                    display: true
                }
            },
            x: {
                beginAtZero: true,
                ticks: {
                    font: {
                        size:function(context) {
                            var width = context.chart.width;
                            
                            if(width<=320) {
                                size = 12;
                            }
                            else {
                                if(width>320 && width<600) {
                                    size = 16;
                                }
                                else {
                                    size = 20;
                                }
                            }
                            //var size = Math.round(width / 32);

                            return size;
                        },
                        weight: "bold"
                    }
                },
                grid: {
                    display: false
                },
                //this title attribute below causes the problem
                title: {
                    text: 'Años',
                    display: true
                }
            }
        },
        plugins: {
            autocolors: false,
            legend: {
                display: false
            },
            title: {
                display: true,
                text: "Retorno de inversión",
                font: {
                    size: 20
                }
            }
        }
    }
});

数据是动态添加的,但是图表一加载页面就显示问题,所以这与数据无关。


没关系,我发现了问题。问题是我正在使用 v3.1 Chart.js,同时尝试使用 v3.5 Chart.js 中的设置。

更改了JS文件版本,现在运行良好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

添加 X 轴标题会导致 Uncaught RangeError:minimumFractionDigits value is out of range in Chart.js 的相关文章

随机推荐

  • 从alertDialog构建器获取editText值

    我是新来的android 我需要得到editText s搜索某些东西的价值 但是当我运行程序时 出现错误null pointer exception EditText etSearch 没有获取它的文本 请帮我 谢谢 public bool
  • 提高 ASP.NET/C# 编译速度的最佳方法是什么?

    更新 请将您的答案集中在硬件解决方案上 您使用什么硬件 工具 插件来提高 ASP NET 编译和首次执行速度 我们正在寻找固态硬盘来加快速度 但现在价格确实很高 我现在有两个 RAID 0 的 7200 rpm 硬盘 但我对性能不再满意 所
  • Bootstrap 中的垂直菜单

    有没有办法使用任何引导类来创建垂直菜单 不是下拉菜单 侧边栏上完全独立的垂直菜单 我可以使用我的 css 创建一个 但只是想知道引导程序中是否有任何内置类 或者可以使用顶部栏通过任何 hack 来完成吗 这个问题现在已经很老了 但如果有人看
  • 在 Asp.net Web API 中处理 CORS 预检

    我的架构中有三个应用程序 它们位于同一服务器上 但具有不同的端口号 A Token Application port 4444 Asp net WebApi B API Application port 3333 Asp net WebAp
  • 如何从对象 URL 获取文件或 blob?

    我允许用户通过拖放和其他方法将图像加载到页面中 当图像被删除时 我正在使用URL createObjectURL转换为对象 URL 以显示图像 我不会撤销该网址 因为我会重复使用它 所以 当需要创建一个FormData对象 以便我可以允许他
  • 尝试使用 fopen() 将文件写入不同的目录

    我正在尝试将文件从一个目录写入另一个目录 例如 http www xxxxxxx com admin upload php http www xxxxxxx com admin upload php to http www xxxxxxx
  • onCreateOptionsMenu(菜单菜单)是什么

    方法中的Menu和menu两个参数是什么onCreateOptionsMenu Menu menu 以及如何使用这个方法 我还有一个问题为什么this参数用于 Intent intent new Intent this DisplayMes
  • 尝试利用?

    我看到我的 nopCommerce 网站记录了以下搜索 ADw script AD4 alert 202 ADw script AD4 我有点好奇他们想要完成什么 我搜索了一下 似乎是ADw script AD4 以 UTF7 编码为
  • C# 中的异步方法如何工作?

    我在我的一些项目中使用异步方法 我喜欢它 因为它使我的应用程序更具可扩展性 但是 我想知道异步方法如何在后台真正工作 NET 或 Windows 如何知道调用已完成 根据我进行的异步调用的数量 我可以看到创建了新线程 但并不总是 为什么 此
  • (jQuery) 在 cookie 中单击时保存复选框状态

    关于此功能有很多主题 但我似乎无法让它工作 我在谷歌上搜索了这个具体案例 有一堆链接让我来到这里 但奇怪的是我似乎无法让它们工作 我所做的唯一工作如下 http dl dropbox com u 2238080 a old z htm ht
  • Clang 使用 -nostdlib 生成崩溃代码

    我正在尝试为可执行文件设置自己的运行时环境 但无法使用 clang v3 4 1ubuntu1 目标 x86 64 pc linux gnu 来生成没有段错误的可执行文件 我已将问题简化为以下内容 如果我有一个文件 crt1 c 除了满足
  • Laravel 4:Facades 是如何解决的?

    我有点想看看 Laravel 4 发生了什么facades在引擎盖下 我们以这个 Facade 为例 File get someArgs 如果我没有记错的话 逐步 过于简化 的调用将是 static method invocation wh
  • 反应本机文本输入焦点

    我的应用程序中有一个表单 我希望用户能够通过单击 下一步 返回按钮转到下一个 TextInput 我的输入组件 export default class Input extends Component focusNextField next
  • Spark数据框中过滤的多个条件

    我有一个包含四个字段的数据框 其中一个字段名称是 Status 我尝试在 filter 中对数据帧使用 OR 条件 我尝试了以下查询 但没有运气 df2 df1 filter Status 2 Status 3 df2 df1 filter
  • Java中使用final关键字会提高性能吗?

    在 Java 中 我们看到很多地方final可以使用关键字 但其使用并不常见 例如 String str abc System out println str 在上述情况下 str can be final但这通常被忽略 当一个方法永远不会
  • 使用注释式 Resilience4j 测试 SpringBoot

    我正在使用注释式 Resilience4j春季启动应用程序 https github com SidekickJohn demo称为 演示 通过 RestTemplate 调用外部后端时 我想使用 TimeLimiter 和 Retry 来
  • 如何使用 Fabrication 定义特质

    我正在学习如何使用制造 http www fabricationgem org getting started in Rails我们决定更换所有factory girl代码与制造 假设我们有这段代码factory girl FactoryG
  • 修改void函数的输入参数并随后读取它

    我有一个相当复杂的 java 函数 我想使用 jUnit 进行测试 并且我正在使用 Mockito 来实现此目的 这个函数看起来像这样 public void myFunction Object parameter doStuff conv
  • 为什么这个 SimpleDateFormat 无法解析这个日期字符串?

    简单日期格式 SimpleDateFormat pdf new SimpleDateFormat MM dd yyyy hh mm ss SSSaa 抛出的异常pdf parse Mar 30 2010 5 27 40 140PM java
  • 添加 X 轴标题会导致 Uncaught RangeError:minimumFractionDigits value is out of range in Chart.js

    我正在尝试向 Chart js 图表的 X 轴添加标题 但是当我将标题属性放在 x 轴上时 出现错误 Uncaught RangeError minimumFractionDigits value is out of range 但它并没有