Chart.js 在一个画布上并排保存两个图表

Question

就像标题一样，我想使用一张画布通过 chart.js 共享。我已经与 DOM 并排看过，但这是另一回事，我需要保留一个画布并保留动画。

我使用 Chart.js 版本：2.8.0（最新），想通过注册插件重新布局绘图。第一部分就像魅力一样，在beforeLayout

chart.width = chart.canvas.width * 0.6;

这将缩放第一个绘图，完美运行，甚至工具提示也仅显示在第一个绘图区域内。如果我设置第二个情节：

chart.width = chart.canvas.width * 0.4;
chart.options.layout.padding.left = chart.canvas.width * 0.6;

情节混乱，堆栈

显然我可以设置

 chart.width = chart.canvas.width * 1;

然后重绘第一个图，但也许有一些简单的方法可以让两个（或更多）图共享画布？

代码取自chart.js 示例并由我修改以生成最小的工作示例。

chart.width = chart.canvas.width * 0.6;

这是所需的结果的样子：
缺少 Y 轴、图例和标题之类的东西用 simple 隐藏display: false，第二个绘图填充顶部设置为第一个绘图 chartArea.top，这里的问题是闪烁且经常重绘第一个绘图，它还接收悬停事件，因此单独设置填充不行，所以应该以某种方式对第二个绘图集进行偏移。

现在，我同时努力进行了一些修改并决定自己清除，剩下的错误是工具提示，在两个图和两个图的条之间的垂直移动中触发。它还需要在调整大小时手动重绘。

chart.width = chart.canvas.width * 0.4;
chart.options.layout.padding.left = chart.canvas.width * 0.6;

它甚至会坚持触发许多更新，但工具提示被剪掉了，在动画过程中同时出现了两个。这个结果看起来几乎像最终版本，所以如果有人想知道为什么，这些是相同数据的四个变量，两个耦合的。由于只剩下条形和工具提示，如果不是用于动画和用于其他绘图的相同框架，我会自己绘制一些矩形。用于进一步处理的管道需要一张图像，因此破解按需画布来绘制它们是不可能的。

下面的问题是当重绘发生时，填充或边距会被 Chart.js 忽略。