微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ChartJs:如何在自动跳过设置为 true 时强制显示标签

如何解决ChartJs:如何在自动跳过设置为 true 时强制显示标签

我正在使用 react-chartjs https://www.npmjs.com/package/react-chartjs-2

我想要做的是:

我有一堆标签,并根据我的需要修改它们以显示。 在 x 轴上我想每周显示日期:

我是这样显示的:

enter image description here

但随着日期范围的增加,我将显示月份。

enter image description here

您看,我将显示 2017 年 1 月(月份名称和年份名称),以帮助我们区分月份。 我通过禁用 autoSkip 并在

中编写逻辑来实现这一点
let options = { maintainAspectRatio: false,spanGaps: true,legend: {
        display: false,},scales: {
        xAxes: [
            {
                gridLines: {
                    color: "rgba(0,0)",ticks: {
                    beginAtZero: true,autoSkip: false
                },afterTickToLabelConversion: function (data) {

        
                        //custom label hiding logic goes here
                },],yAxes: [
            {
                ticks: {
                    beginAtZero: true,userCallback: function (label,index,labels) {
                        if (Math.floor(label) === label) {
                            return label;
                        }
                    },tooltips: {
        callbacks: {
            title: '',elements: {
        line: {
            tension: 0,}

但问题是标签看起来不统一。嗯,自动跳过 (autoskip:true) 的优点是标签往往看起来统一,但它往往隐藏重要标签,如必须强制显示的年份(2017 年 1 月),因为它有助于我区分年的几个月。

  1. 我想知道是否有某种方法可以启用自动跳过,并确保可以强制显示某些值,以确保它们不会被跳过。 (阅读docs中major的使用但无法使用)。

  2. 启用自动跳过时,它可能会跳过很多值并使标签分散,请提出一个方法,以确保即使数据点增加,我也能以固定间隔均匀显示值而且我也不会错过显示重要标签的机会,例如(2017 年 1 月)。这应该是一个自定义的东西,但如果有一个功能可以在这个过程中帮助我,我会非常感激。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。