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 (将#修改为@)