如何解决在ChartJS中将两个折线图合并为一个

我有什么

我已经创建了两个图，如下面的第一幅图所示。我需要将这2个图在0轴上完美对齐（如下节所示）。

想要的结果

在下图中，图形完全对齐，因此应包含2个不同的数据集。一个应该放置在左侧网格上，另一个应该放置在右侧网格上。

我想到的选项

我还没有在ChartJS中实现这种方法。因此，我想到了一些可能以不同方式解决此问题的解决方案。

因为两个数据集都没有负值，所以我可以将左侧数据集转换为负值（在x轴上）。不利之处在于范围不正确。另外，如果将鼠标悬停在某个值上，这将使弹出消息出现问题。
也许可以合并两个canvas对象，这可能会导致想要的结果

问题

是否可以在ChartJS中获得想要的结果？或者我可以执行一些巫术以将两个图表很好地组合成一个图表吗？还是应该移至该特定图形的D3.js库？

解决方法

我没有找到一种“巧妙地”实现此方法的方法。我已经更改了ChartJS库的源代码以实现此目的。

此方法使用在2个不同的canvas对象中呈现的2个不同的图形。这些canvas对象并排放置，使其看起来像一张图。

这是我的结果（此处的代码与图片中的图形并不完全一样，因为我将其更改为自己的特定需求）。

我在options.layout类别中添加了一个名为sidePadding的自定义变量。

创建图形的代码：

new Chart(document.getElementById(this.element),{
         type: 'scatter',data: {
             datasets: [{
                 borderColor: this.lineColor,borderWidth: 1,pointBackgroundColor: '#000',pointBorderColor: '#000',pointRadius: 0,fill: false,tension: 0,showLine: true,data: [],}],},options: {
             aspectRatio: 0.3,maintainAspectRatio: false,responsive: true,layout: {
                 sidePadding: {
                     left: 3,right: -3,}
             }
         }
     });

默认情况下，侧面的填充为3，因此它不会碰到画布的边框。我希望它触摸画布的边框，因此将其设置为-3。

需要创建两个不同的图，一个用于左侧，一个用于右侧。左图应将sidePadding.right设置为-3。右图应将sidePadding.left设置为-3。

ChartJS库中的更改

我使用的是ChartJS版本v2.9.3。在新版本中，该方法可能不再起作用。

我在Chart.js文件中更改了以下内容：

替换（行号在11800附近）

// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft),0) + 3;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight),0) + 3;

收件人：

// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
var layoutOptions = chart.options.layout || {};
var sidePadding = helpers$1.options.toPadding(layoutOptions.sidePadding);
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft),0) + sidePadding.left;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight),0) + sidePadding.right;

还必须将sidePadding.left和sidePadding.right参数添加到ChartJS。

这可以通过更改（行号在7180附近）来完成：

core_defaults._set('global',{
    layout: {
        padding: {
            top: 0,right: 0,bottom: 0,left: 0
        },// Custom added parameter
        sidePadding: {
            left: 3,right: 3,}
    }
});

收件人：

core_defaults._set('global',}
    }
});

注意

这可能不是实现此目的的最佳方法。更改ChartJS库是不切实际的做法，更新该库可能会还原这些更改。

如果有人可以更好地实现这一目标，请在下面发布您的方法或评论。

在ChartJS中将两个折线图合并为一个