Chart.js - 折线图：在网格线之间绘制点答案

【问题标题】：Chart.js - Line charts: draw points between grid linesChart.js - 折线图：在网格线之间绘制点
【发布时间】：2016-06-22 14:05:59
【问题描述】：

我正在使用 Chart.js 2.1.3 版创建折线图。

我想在 x 轴上的网格线之间将标签和点居中（如在条形图中）。

对于标签，我使用选项“offsetGridLines”将标签从网格线偏移：

scales: {
    xAxes: [{
        gridLines: {
            offsetGridLines: true
        }
    }],
    ...

不过，我找不到中心点的便捷解决方案。

这是我的初始示例（位于网格线之间的标签）：https://jsfiddle.net/24aotbnc/1/。

这是我的非优雅解决方案，它创建一个“bar”类型的空数据集并在创建图表后将其删除（在网格线之间绘制点）：https://jsfiddle.net/24aotbnc/2/

有人可以提供更好的解决方案吗？谢谢。

【问题讨论】：

标签： javascript jquery charts chart.js

【解决方案1】：

Line 点的位置 x（有或无偏移）仅根据数据集长度计算

 var includeOffset = (labels.length === 1 || dataset.data.length === 1) || me.chart.isCombo;
 x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex, includeOffset);

所以 includeOffset 决定了线点的位置在区域的中间或左侧，并且无法配置它。

【讨论】：