【问题标题】:Bar Graph in email body电子邮件正文中的条形图
【发布时间】:2013-01-13 00:31:56
【问题描述】:

是否可以在电子邮件正文中绘制动态条形图。 (需要与 Outlook 兼容)

我需要在通过oracle数据库发送的电子邮件中绘制一个图形,动态值将通过一个过程传递。

【问题讨论】:

  • 不。你需要一张图片。

标签: css html html-email bar-chart


【解决方案1】:

您可以使用谷歌图表之类的东西来创建嵌入到您的 html 电子邮件中的动态图像(通过正确的数据集)。

http://imagecharteditor.appspot.com/

http://www.jonwinstanley.com/charts/

【讨论】:

【解决方案2】:

这必须以“旧”的 html 方式完成。表格和普通图像的含义。

假设您要创建一个包含 5 个项目的条形图。您创建一个包含您需要的所有单元格的表格,然后您将拥有 5 张不同的图像,您可以在发送个性化电子邮件时垂直动态缩放。每个图像都只是一个实心块,比如说 10x10px 的 5 种不同颜色。对于发送的每封电子邮件,您会将图像的大小覆盖为块的大小。然后,您将放置您的电子邮件应用程序的替代模式(即 %%variable%%),并为每封发送的电子邮件使用正确的值。

例如:

<table border=0>
<tr>
<td align=bottom><img src=redblock.gif width=20 height=%%height1%%></td>
<td align=bottom><img src=greenblock.gif width=20 height=%%height2%%></td>
<td align=bottom><img src=yellowblock.gif width=20 height=%%height3%%></td>
<td align=bottom><img src=blueblock.gif width=20 height=%%height4%%></td>
<td align=bottom><img src=greyblock.gif width=20 height=%%height5%%></td>
</tr>
<tr>
<td colspan=5 bgcolor=#000000 height=1><img src=singlepixel.gif width=1 height=1></td>
</tr>
<tr>
<td>Spain</td>
<td>France</td>
<td>US</td>
<td>UK</td>
<td>Italy</td>
</tr>
</table>

【讨论】:

    【解决方案3】:

    你不能用 JavaScript 做任何事情,因为电子邮件客户端不解析它。

    但是您可以告诉您的服务器在文件上设置一个标题,使其成为 JPEG 或 GIF。文件扩展名也应该是 jpg 或 gif,因为一些电子邮件客户端在渲染没有扩展名或没有图像扩展名的图像时会发疯。不确定您使用的是什么服务器端,但大多数都有某种动态图像生成库。

    或者,使用表格呈现图表。

    <table>
      <tr>
        <td colspan="10" bgcolor="pink"></td>
      </tr>
      <tr>
        <td colspan="5" bgcolor="pink"></td>
        <td colspan="5" bgcolor="white"></td>
      </tr>
    </table>
    

    你明白了。不幸的是,您必须编写一些东西来生成相关的 HTML。

    【讨论】:

      【解决方案4】:

      最好的解决方案是动态创建条形图,然后将其转换为图像。您可以简单地使用打印屏幕并将其导入 Photoshop 或其他任何工具并在那里编辑图像。

      HTML 电子邮件是出了名的坏事,因为它们对 10 多年前的 html 代码反应最好。

      一些基本准则:

      • 不要尝试在电子邮件中使用 HTML5。
      • 不要尝试使用花哨的 CSS 或链接到外部样式表,甚至不要在 HEAD 中使用 css 样式。
      • 不要尝试使用 javascript,因为它不起作用
      • 不要尝试使用 Flash,因为它不起作用。

      • 务必使用内联 CSS

      • 请务必使用 HTML 表格进行布局
      • 请使用图片,但尽量保持文件大小尽可能小。

      【讨论】:

      • +1 我希望当我第一次进入有趣的 HTML 电子邮件世界时能看到这条评论
      猜你喜欢
      • 1970-01-01
      • 2012-06-07
      • 2016-04-12
      • 1970-01-01
      • 2021-12-21
      • 1970-01-01
      • 1970-01-01
      • 2017-01-16
      相关资源
      最近更新 更多