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 和自适应。

  • Chart.js
    1 引用 • 1 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    635 引用 • 1121 回帖 • 766 关注
  • 图表
    2 引用 • 1 回帖

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Rabbitzzc

    ResizeObserver 的兼容性比较差,目前还是实验性的 API,很多浏览器并没有支持,所以需要关注了