html - 如何使用 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 属性。

在用户打印该页面之前，这非常有用，我确实希望该页面被打印多次。

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

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

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

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

Answer 1

添加this style对于 Chrome:

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

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

否则，您可能需要像@MiltoxBeyond 建议的那样求助于 SVG。