Chart.js 生成图表的自适应方法：ResizeObserver API

纯分享和讨论，告诫如果使用 Chart.js 作为生产环境工具，一定要确定兼容性。

G2 图表对于图表的自适应是通过 window.addlistener('resize', ()=>{}) 实现的。

这种方法很常用，但是也很有风险，特别是内部图表父类容器变化，而浏览器窗口没有变化的时候，这样图表就无法自适应了。

所以，就偷偷看了一下 Chart.js 的实现。

果然，Chart.js 实现方式更厉害，直接使用最新的实验 API，ResizeObserver API:

function createResizeObserver(chart, type, listener) {
	const canvas = chart.canvas;
	const container = canvas && _getParentNode(canvas);
	if (!container) {
		return;
	}
	const resize = throttled((width, height) => {
		const w = container.clientWidth;
		listener(width, height);
		if (w < container.clientWidth) {
			listener();
		}
	}, window);

	// @ts-ignore until https://github.com/microsoft/TypeScript/issues/37861 implemented
	const observer = new ResizeObserver(entries => {
		const entry = entries[0];
		const width = entry.contentRect.width;
		const height = entry.contentRect.height;
		if (width === 0 && height === 0) {
			return;
		}
		resize(width, height);
	});
	observer.observe(container);
	return observer;
}
​

整体就是通过创建 ResizeObserver 对象，监听 DOM 容器变化，从而实现 resize 和自适应。