Question

我想在我的电子邮件中显示图表 - Bar，Area，Pie Charts。我尝试了几个基于CSS的图表与内联样式，但它仍然没有显示。这是在电子邮件中显示图表的最佳方式。

图像是唯一的选择吗？

Answer 1

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

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

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

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

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

Answer 2

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

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

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

它称为图像图表。不再有服务器端图表呈现的麻烦，没有缩放问题，它的速度非常快，1 URL = 1图像图表。

Answer 3

晚了3。5年，但我在拉面的团队最近将一些内部功能分解为一个独立的产品：https://ChartURL.com

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

有一个免费套餐，但是一旦你每月收到几百张图片，我们会要求你开始付款。不过，我们真的努力使定价尽可能友好。如果用例对您的业务至关重要，那么它应该是一个明智的选择。

它建立在http://C3js.org之上，所以你可以产生很大的灵活性。

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

Answer 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]
    }]
  }
}

将其填充到URL：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服务，也可以直接从源代码运行Web服务。

Answer 5

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

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

链接：Charty

电子邮件图表 - 酒吧，区域和饼图

5 个答案: