11

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

图片是唯一的选择吗？

4

5 回答 5

22

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

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

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

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

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

于 2012-06-03T10:18:45.237 回答
4

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

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

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

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

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

于 2018-09-14T10:26:03.790 回答
3

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

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

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

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

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

于 2015-11-25T03:12:34.783 回答
0

如果您习惯于在 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: '数据'，数据： [12, 6, 5, 18, 12] }] }}

它将返回一个静态图像：

电子邮件的图表图像

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

于 2019-12-07T17:20:55.803 回答
-1

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

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

链接：查蒂

于 2018-10-01T13:11:49.577 回答