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

标签 html css charts highcharts google-visualization

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

图片是唯一的选择吗?

最佳答案

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

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

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

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

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

关于html - 电子邮件图表 - 条形图、面积图和饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10862767/

相关文章:

javascript - 在 HTML5 Web SQL 数据库中对日期时间进行排序

javascript - 如何使用 Javascript 链接到外部 <div>?

html - 给 parent 与 child 相同的宽度

c# - iText7 - 将 HTML 转换为 PDF 时不呈现 CSS3 文本溢出属性

javascript - 图像渲染问题 React Native

javascript - Ticks 属性在 Chartist.js 中不起作用

javascript - 如何在 amCharts 上同时显示月份和年份?

html - 我怎样才能使这个表格居中?

css - 重置 css 使 Google 字体的 @import 不起作用

WPF数据可视化