Chart.js 在混合图表中，它是否能够对齐左边缘的折线图？

我想在混合图表中对齐左边距的折线图，如下所示

但当我在数据中添加折线图时，它会根据现有的条形图自动与中心对齐，如下所示

---

纯粹通过chart.js中的配置无法做到这一点。浏览源代码后，我看到当折线图出现在组合条形图上时，它们在内部设置了一个

offset=true

属性

因此，实现此行为的唯一方法是扩展折线图并实现您自己的函数来控制此

偏移量

变量的设置。事实证明，这并不难做到。下面是一个示例（注意，

offset

变量仅在折线图的

updateElement（）

函数中设置）

定义新图表类型后，必须更改配置以使用此新类型

---

下面是一个显示最终结果的示例（并演示如何执行此操作）。

在chart.js中，单纯通过配置是无法做到这一点的。浏览源代码后，我看到当折线图出现在组合条形图上时，它们在内部设置了一个

offset=true

属性

因此，实现此行为的唯一方法是扩展折线图并实现您自己的函数来控制此

偏移量

变量的设置。事实证明，这并不难做到。下面是一个示例（注意，

offset

变量仅在折线图的

updateElement（）

函数中设置）

定义新图表类型后，必须更改配置以使用此新类型

---

下面是一个显示最终结果的示例（并演示如何操作）。

根据@jordanwillis的回答，我想出了一个更好的方法，它与chart.js

2.7.*

兼容，在未来版本中使用应该更安全，因为它重用了更多的现有代码：

Chart.controllers.LineNoOffset = Chart.controllers.line.extend({
    updateElement: function(point, index, reset) {
        Chart.controllers.line.prototype.updateElement.call(this, point, index, reset);
        const meta = this.getMeta();
        const xScale = this.getScaleForId(meta.xAxisID);
        point._model.x = xScale.getPixelForValue(undefined, index-0.5);
    },
});

---

根据@jordanwillis的回答，我想出了一个更好的方法，它与chart.js

2.7.*

兼容，并且在将来的版本中使用应该更安全，因为它重用了更多的现有代码：

Chart.controllers.LineNoOffset = Chart.controllers.line.extend({
    updateElement: function(point, index, reset) {
        Chart.controllers.line.prototype.updateElement.call(this, point, index, reset);
        const meta = this.getMeta();
        const xScale = this.getScaleForId(meta.xAxisID);
        point._model.x = xScale.getPixelForValue(undefined, index-0.5);
    },
});

---

你想精确对齐什么？我想让折线图的数据点从左端开始。重新上传已编辑的照片。您希望精确对齐什么？我想让折线图的数据点从左端开始。重新上载编辑的照片。感谢您节省我的时间。不幸的是，此答案针对v2.5.0。@jordanwillis我找到了如何改进您的解决方案并将其作为答案发布。感谢您节省我的时间。不幸的是，此答案针对v2.5.0。@jordanwillis我找到了如何改进您的解决方案并将其作为答案发布。

Chart.controllers.LineNoOffset = Chart.controllers.line.extend({
    updateElement: function(point, index, reset) {
        Chart.controllers.line.prototype.updateElement.call(this, point, index, reset);
        const meta = this.getMeta();
        const xScale = this.getScaleForId(meta.xAxisID);
        point._model.x = xScale.getPixelForValue(undefined, index-0.5);
    },
});