最近做的一个项目需要用图表方式显示数据摘要,
数据在后台产生,图表在前台用vis.js显示。
vis.js的Graph2D API简洁好用,画出来的图表可以自由缩放,本来觉得挺完美了,结
果想用JS加一个下载图表功能的时候发现有个大坑。
原因是vis.js画的图表是用一堆DIV DOM加SVG Path实现的,DIV DOM负责坐标,SVG
Path负责数据线条。如果用SVG to PNG conversion的方法抓出来的只有数据线条,用
html2canvas抓出来的则只有坐标。
绞尽脑汁最后弄了一个笨办法,就是用window.print()让用户自己打印成PDF。但是因
为页面上的图表宽度是动态的,打印时会overflow,所以最后又不得不绕了一下,用
vis.js同时产生2副图,用CSS控制一副动态宽度在网页上显示,一副固定宽度专门在打
印时显示,总算凑合实现的目标功能。
不知道版上大牛有没有更好的解决方案?