ChartJS js:如何更改任意大小的x轴刻度标签对齐方式?

tyu7yeag  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(179)

如何将X轴上的标签移动到另一个X轴标签之间。似乎没有任何操作,而且我在文档上找不到任何内容。有解决方法吗?我使用的是折线图时间序列。https://www.chartjs.org/samples/latest/scales/time/financial.html
目前,与代码我有其生成下图:

var cfg = {
            elements:{
                point: {
                    radius: 4
                }
            },
            data: {
                datasets: [
                    {
                        label: 'vsy',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.red,
                        data: firstData,
                        type: 'line',
                        pointRadius: 2,
                        fill: false,
                        lineTension: 0,
                        borderWidth: 2
                    },
                    {
                        label: 'de vsy',
                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.blue,
                        data: dataMaker(15),
                        type: 'line',
                        pointRadius: 2,
                        fill: false,
                        lineTension: 0,
                        borderWidth: 2
                    }
                ],

            },
            options: {

                animation: {
                    duration: 0
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'series',
                        offset: true,

                        time: {
                            unit: 'month',
                            displayFormats: {                                
                                month: 'MMM'
                            }
                        },

                        ticks: {

                            autoSkip: true,
                            autoSkipPadding: 75,

                            sampleSize: 100
                        },

                    }],
                    yAxes: [{
                        gridLines: {
                            drawBorder: false
                        }

                    }]
                },
                tooltips: {
                    intersect: false,
                    mode: 'index',

                }
            }
        };

这就是我现在所拥有的:

我希望X轴上的标签位于中心而不是Y轴网格线的下方。

感谢uminder,他的评论解决了这个问题,但现在我有一个冲突的工具提示,躺在同一个网格。当我悬停到四月线的第一个点,它显示我mar 30,就在它上面,反之亦然。

我通过将模式更改为nearest修复了它,但为什么它会激活另一个点?

kgsdhlau

kgsdhlau1#

您正在寻找的选项是offsetGridLines
如果为true,则网格线将移动到标签之间。

xAxes: [{
  ... 
  gridLines: {
    offsetGridLines: true
  }

在大多数情况下,这会产生预期的结果。不幸的是,它不适用于Chart.js issue #403中记录的时间轴。多亏了Antti Hukkanen,才有了workaround
请看一下下面的可运行代码片段,看看它是如何工作的。
第一个

2ul0zpep

2ul0zpep2#

对于chartJs v3,您可以使用offset属性:

scales: {
  x: {
    grid: {
        offset: true
    }
  },
...
}

相关问题