Javascript js将两个图表并排放在一个画布上

就像在标题中一样，我想通过chart.js使用一个画布来共享。我看到了，但这是另外一件事，我需要保留一个画布和保存动画

我使用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;

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

代码取自并由我修改，以产生最小的工作示例。

折线图


随机化数据
变量配置={
类型：'bar'，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“绿色”，
边框颜色：“蓝色”，
数据：[
Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（）
],
填充：假，
}, {
标签：“我的第二个数据集”，
填充：假，
背景颜色：“蓝色”，
边框颜色：“蓝色”，
数据：[
Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（）
],
}]
},
插件：[{
布局前：功能（图表）{
chart.width=chart.canvas.width*0.6；
chart.options.layout.padding.left=0；
},
}],
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js折线图”
},
工具提示：{
模式：“索引”，
交集：错，
},
悬停：{
模式：“最近的”，
交集：对
},
比例：{
xAxes：[{
显示：对，
scaleLabel：{
显示：对，
标签串：“月”
}
}],
雅克斯：[{
显示：对，
scaleLabel：{
显示：对，
标签字符串：“值”
}
}]
}
}
};
变量配置2={
类型：'bar'，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“绿色”，
边框颜色：“蓝色”，
数据：[
Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（）
],
填充：假，
}, {
标签：“我的第二个数据集”，
填充：假，
背景颜色：“蓝色”，
边框颜色：“蓝色”，
数据：[
Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（），Math.random（）
],
}]
},
插件：[{
布局前：功能（图表）{
chart.width=chart.canvas.width*0.4；
chart.options.layout.padding.left=chart.canvas.width*0.6；
},
}],
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js折线图”
},
工具提示：{
模式：“索引”，
交集：错，
},
悬停：{
模式：“最近的”，
交集：对
},
比例：{
xAxes：[{
显示：对，
scaleLabel：{
显示：对，
标签串：“月”
}
}],
雅克斯：[{
显示：对，
scaleLabel：{
显示：对，
标签字符串：“值”
}
}]
}
}
};
window.onload=函数（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
window.myLine=新图表（ctx，配置）；
window.myLine2=新图表（ctx，配置2）；
};
document.getElementById（'randomizeData'）。addEventListener（'click'，function（）{
config.data.datasets.forEach（函数（数据集）{
dataset.data=dataset.data.map（函数（）{
返回Math.random（）；
});
});
config2.data.dataset.forEach（函数（数据集）{
dataset.data=dataset.data.map（函数（）{
返回Math.random（）；
});
});
window.myLine.update（）；
window.myLine2.update（）；
});

To downvoter/closer：在一张画布上放两张图表很简单，我认为这很窄。我已经提供了半工作代码，这需要一个想法或几行黑客。同时，我也看到了Chart.js的问题，在一个画布上不支持多个图表，但人们似乎对这个解决方案感兴趣。如果还有其他问题，我将很乐意解决。非常感谢。