如何使用 HTML5 和 CSS3 制作可打印的条形图？

Question

我最近创建了一个使用 HTML5 和 CSS3 来绘制条形图的网页。这是我第一次这样做，我按照这里给出的说明进行操作：http://www.htmlgoodies.com/html5/tutorials/bar-graph-with-css3-and-progressive-enhancement.html#fbid=gG6mmpDnQDn

总而言之就是为每个条创建一个DIV标签，并使用CSS来设置每个条的大小和颜色。具体来说，使用 background-color CSS 属性。

这在用户打印页面之前效果很好，我确实希望该页面被打印多次。

问题在于网络浏览器通常会从页面的打印版本中忽略背景图像和颜色。这会导致条形图根本不打印！

Chrome 允许用户选中一个指示应打印背景图像和颜色的框，但我说“要打印此内容，请使用 Chrome 并确保选中该框 yada yada yada”是不切实际的。

我部署的一个权宜之计是使用 CSS 来指定在打印文档时，应该在条的周围画一个边框，但这只是一个边框；它根本没有填满栏。

如何使用 HTML5 和 CSS3 制作在大多数浏览器配置下都能正确打印的条形图。

Answer 1

为 Chrome 添加 this style：

:root {-webkit-print-color-adjust: exact;}

这会将您的用户说明简化为“要打印此内容，请使用 Chrome。”

否则，您可能需要像 @MiltoxBeyond 建议的那样使用 SVG。