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

【问题标题】：Email Charts - Bar, Area and Pie Charts电子邮件图表 - 条形图、面积图和饼图
【发布时间】：2012-06-07 10:22:00
【问题描述】：

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

图片是唯一的选择吗？

【问题讨论】：

您是否针对特定的电子邮件客户端？
@Mark 基本上是手机客户端 - iPhone 和 Android。
AlphaMail 有一个generate charts in transactional email 的功能（我是开发人员之一）。
嵌入式图像图表适用于大多数客户端，因为附件使其通过了一些常见的安全过滤器。你可以在这里找到一个简短的python实现datamakessense.com/…
????如果您正在寻找支持 (gif) 动画支持的电子邮件嵌入的基于图像的图表，我们已经构建了它，请查看 image-charts.com

标签： html css charts highcharts google-visualization

【解决方案1】：

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

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

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

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

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

【讨论】：

对于可靠性，基于图像的图表可能仍然是首选选项。您可以使用 sqlchart sqldashboards.com/sqlchart 从命令行生成图表

【解决方案2】：

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

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

这就是为什么我构建了 a drop-in-replacement for Google Image Charts ? 并在其上添加了 gif animation ?（电子邮件中的图表动画很棒！！）。

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

【讨论】：

【解决方案3】：

晚了 3.5 年，但我在 Ramen 的团队最近将一些内部功能分离到一个独立的产品中：https://ChartURL.com

您可以使用“加密 URL”方案动态生成图表，或者您可以向我们发送大量数据，我们会返回一个可解析为图像的短 URL。

有一个免费套餐，但是一旦您每月获得超过几百张图片，我们就会要求您开始付费。不过，我们确实努力使定价尽可能友好。因此，如果用例对您的业务至关重要，那么它应该是显而易见的。

它建立在 http://C3js.org 之上，因此您可以灵活地生成内容。

这些网址可用于网络应用程序和移动应用程序，但最初的意图是电子邮件图表，所以我希望这会有所帮助！

【讨论】：

很好的答案，但请注意，虽然有免费套餐，但（大部分）这是您付费使用的产品。
是的，好点@zoot 我将编辑答案以更清楚地反映这一点。

【解决方案4】：

如果您习惯于在 Javascript 中构建图表，则将这些图表大量呈现为图像在技术上是相当复杂的。您需要选择一些渲染服务（例如无头浏览器或画布实现）并进行大量故障排除。

我经历了这个过程并发布了开源QuickChart，这是一个获取数据并生成适合电子邮件的静态图像的 Web API。你可以在这里看到这个项目：https://github.com/typpo/quickchart

它基于 Chart.js API。给定这样的图表配置：

{
  type: 'bar',
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],
    datasets: [{
      label: 'Data',
      data: [12, 6, 5, 18, 12]
    }]
  }
}

把它塞进一个网址：https://quickchart.io/chart?bkg=white&c={ type: 'bar', data: { labels: [2012, 2013, 2014, 2015, 2016], datasets: [{ label: 'Data', data: [12, 6, 5, 18, 12] }] }}

它会返回一张静态图片：

Quickchart.io 有一个托管（也是免费）版本，但您可以自己在 Docker 上或直接从源代码运行 Web 服务。

【讨论】：

【解决方案5】：

免责声明：我是 Charty 的创始人

您可以尝试使用 Charty，它可以在几秒钟内创建交互式图表，并且支持 25 种以上的图表类型。

链接：Charty

【讨论】：