电子邮件图表 \- 条形图、面积图和饼图

Question

我想在我的电子邮件中显示图表 - 条形图、面积图、饼图。我尝试了一些带有内联样式的基于 CSS 的图表，但它仍然没有显示出来。这是在电子邮件中显示图表的最佳方式。

图片是唯一的选择吗？

原文由 Harsha M V 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

单独发送 HTML 电子邮件是一项棘手的工作。各种邮件客户端的各种标准和限制以及大量的安全限制使得创建跨浏览器/客户端的 HTML 电子邮件发送变得困难。作为经验法则，我觉得您使用的技术越旧，跨邮件客户端统一复制的效果就越好。我所说的“旧”技术是指表格驱动的 HTML、具有非常基本的 CSS 属性的内联 CSS、无脚本等。

您在电子邮件中使用图表的可能性：

1. Flash 图表 - 这会被几乎所有的邮件客户端阻止。
2. HTML5 图表——大多数电子邮件客户端（包括基于 Web 的）将阻止 SVG，并且还会使“画布”驱动的图表变得无用，因为 JavaScript 肯定会被阻止。
3. 纯 HTML 和 CSS 图表可能有效，但由于大多数流行的图表库使用高级 HTML 功能，因此大多数图表在电子邮件中无法正常呈现。
4. 基于图像的图表 - 你最好的选择是图表的图像。由于内联图像在电子邮件客户端之间广泛发送，我的建议是生成一个图表作为图像，然后将其作为 HTML 邮件的一部分包含在内。大多数图表组件（如 FusionCharts、Highcharts 等）允许您将图表生成为图像。

如果您打算使用基于图像的图表，但又希望它是动态生成的，一个好技巧是创建一个服务器端脚本，您可以通过查询字符串向该脚本发送数据，它会返回一个图像使用此数据生成的图表。

如果您在部署基于图像的图表时遇到任何问题，那么您可能会考虑使用简单的基于纯 HTML 的图表 <table> , <div> 和内联 CSS 来生成图表。可悲的是，我认为市场上没有现成的组件。

原文由 Shamasis Bhattacharya 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

_免责声明：我是 Image-Charts 的创始人_。

作为一名独立黑客，每次我开始一个新的 SaaS（从头开始重写一个图像生成后端，然后通过电子邮件发送图表）时，我都会遇到和你一样的问题。

这就是为什么我 为 Google Image Charts 构建了一个替代品 👍 并在其上添加了 gif 动画 🚀（电子邮件中的图表动画很棒！！）。

它被称为图像图表。不再有服务器端图表渲染的痛苦，没有缩放问题，速度非常快，1 个 URL = 1 个图像图表。

原文由 FGRibreau 发布，翻译遵循 CC BY-SA 4.0 许可协议