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

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

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

没有关于这方面的文档，但我相信通过巧妙的技巧，这个问题可以很容易地解决。关于如何实现这一点有什么想法吗

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

名称：drawOnChartArea
类型：布尔值
描述：如果为true，请在图表区域的轴线内绘制线。当存在多个轴且需要控制绘制哪些轴网线时，此选项非常有用

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

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

---

有点晚了，但希望能帮助到别人

我的问题是试图强制使用

类型为“气泡”的图表和
类型为“线性”的x轴将标签放置在网格线的中心。“标签居中”功能是带有
类型：'category'
的轴的标准功能，如条形图。通过定义两个
xax
而不显示线性点，可以使用类别样式标签获得线性点放置

在本例中，点在整个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中使用了这个选项。
在你的答案中添加一个小的解释来描述为什么这个选项有效。虽然这个代码片段可以解决这个问题，但确实有助于提高你文章的质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。@Pasquale我认为此解决方案适用于chart.js 2.x，而正如我在问题中所述，我使用的是chart.js 1.0.2。我试图将
drawOnChartArea:true
添加到我的图表选项中，但没有帮助。这似乎根本解决不了问题，是吗？把线放在图表区域的中心是如何使记号标签居中的？你给出了与Pasqual相同的答案。此解决方案适用于我在使用Chart.js 1时使用的Chart.js 2.0。对不起，我没有在代码中更改参数。。。现在它被编辑了。我用偏移网格线代替drawOnChartArea。现在可以用了吗？我仍然不认为这是Chart.js 1.x语法。我现在使用的语法是：
newchart（document.getElementById（“line”）.getContext（“2d”））.line（lineChartData，{响应：true，动画：true，pointDot:true，pointDotRadius:5，Bezier曲线：true，pointHitDetectionRadius:60，datasetStroke:true，datasetStrokeWidth:4，datasetFill:true，BarDataSetSpace:1，scaleOverride:true，drawOnChartArea:true，scaleSteps:4，scaleStartValue:0}）；
错误！此参数不移动标签，而是移动网格线。这不是一回事。
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'
                }
            }
        ],
        ...
    }
}