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

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

---

图像是唯一的选择吗？

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

您在电子邮件中查看图表的可能性：

闪图-这将被几乎所有的邮件客户端阻止

HTML5图表-大多数电子邮件客户端（包括基于web的客户端）都会阻止SVG，并且会使“画布”驱动的图表变得无用，因为JavaScript肯定会被阻止

纯HTML和CSS图表可能会起作用，但由于大多数流行的图表库使用高级HTML功能，大多数图表在电子邮件中都不会呈现良好效果

基于图像的图表-最好的选择是图表的图像。由于内联图像在电子邮件客户端广泛发送，我的建议是生成一个图表作为图像，然后将其作为HTML邮件的一部分。大多数图表组件（如FusionCharts、Highcharts等）允许您将图表生成为图像

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

---

如果您在部署基于图像的图表时遇到任何问题，那么您可以考虑使用简单的

、

和内联CSS生成图表的纯HTML图表。遗憾的是，我不认为市场上有现成的组件可供使用。

3.5年后，但我在Ramen的团队最近将一些内部功能拆分为一个独立的产品，它可以做到这一点：

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

有一个免费的层，但一旦你得到超过几百张图片每月，我们会要求你开始支付。不过，我们确实努力使定价尽可能友好。因此，如果用例对您的业务至关重要，那么它应该是不需要动脑筋的

它是建立在上，所以有一个吨的灵活性，你可以产生

这些URL可以用于web应用程序和移动应用程序，但其初衷是电子邮件图表，所以我希望这能有所帮助

免责声明：我是图像图表的创始人

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

这就是我创建免责声明的原因：我是Charty的创始人

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

---

链接：

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

我经历了这个过程，并发布了开源，这是一个web API，可以获取数据并生成适合电子邮件的静态图像。您可以在此处看到该项目：

它基于Chart.js API。给定如下图表配置：

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

将其填充到URL中：

它将返回一个静态图像：

---

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

您是针对特定的电子邮件客户端吗？@Mark基本上是电话客户端-iPhone和安卓。AlphaMail有一个功能（我是开发人员之一）。嵌入式图像图表适用于大多数客户端，因为附件使它通过了一些常见的安全过滤器。您可以在这里找到一个简短的python实现，以提高可靠性基于图像的图表可能仍然是首选选项。您可以使用sqlchart Good answer从命令行生成图表，但请注意，尽管有一个免费的层，但这（在大多数情况下）是您付费使用的产品。耶，Good point@zoot我将编辑答案以更清楚地反映这一点。