如何将 Chart.JS 折线图标签与中心对齐

Question

我正在使用 Chart.JS 1.0.2 创建折线图：

我要做的是将图表底部的标签移动到每个矩形的中心（而不是与垂直网格线对齐）：

chartjs.org 上没有关于此的文档，但我相信通过巧妙的技巧可以轻松解决此问题。关于如何实现这一点的任何想法？

Answer 1

offsetGridLines（布尔值） 如果为 true，标签将移动到网格线之间。

type: 'line',
data: data,
options: {
    ...
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]}
    }
}

Answer 2

在ChartJS Documentation，在“网格线配置”下有drawOnChartArea选项：

名称：drawOnChartArea
类型：布尔值
描述：如果为真，则在轴线内的图表区域上画线。当有多个轴并且您需要控制绘制哪些网格线时，这很有用

{
    type: 'line',
    data: data,
    options: {
        ...
        scales: {
            xAxes: [{
                gridLines: {
                    drawOnChartArea: true
                }
            ]}
        }
    }
}

Answer 3

有点晚了，但希望对某人有所帮助。

我的问题是试图强制使用type: 'bubble' 和带有type: 'linear' 的x 轴将标签放置在网格线的中心。 “居中标签”功能是带有type: 'category' 的轴的标准功能，就像在条形图上一样。您可以通过定义两个 xAxes 而不显示线性的来获得带有类别样式标签的线性点放置。

在此示例中，点是在 365 天内绘制的，每个季度都有 x 轴刻度，季度标签位于绘图区域的中心。

data: {
    xLabels: ['Q1', 'Q2', 'Q3', 'Q4'],
    ...
}, 
options: {
    scales: {
        xAxes: [
            {
                id: 'xAxis1',
                type: 'linear',
                display: false,
                ticks: {
                    min: 0,
                    max: 365,
                    stepSize: 365 / 4
                }
            },
            {
                id: 'xAxis2',
                type: 'category',
                gridLines: {
                    offsetGridLines: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Day of Year'
                }
            }
        ],
        ...
    }
}

我已将它用于 chart.js 2.x。

Answer 4

测试一下：

labelOffset:-5 //adjust number