电子邮件正文中的条形图

时间:2013-01-29 12:27:56

标签: html css html5 html-email bar-chart

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

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

4 个答案:

答案 0 :(得分:18)

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

HTML电子邮件是非常糟糕的事情,因为它们对10年以上的HTML代码反应最好。

一些基本准则:

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

  • 请使用内联CSS

  • 请使用HTML TABLES进行布局
  • 请使用图片,但请尽量保持文件大小。

答案 1 :(得分:3)

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

http://imagecharteditor.appspot.com/

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

答案 2 :(得分:1)

您无法对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。

答案 3 :(得分:1)

这必须在&#34; old&#34; HTML方式。表格和普通图像的含义。

我们假设你要创建一个包含5个项目的条形图。你创建一个包含你需要的所有单元格的表格,然后你就可以了,在发送个性化电子邮件时,你可以说5个不同的图像可以垂直动态缩放。每个图像只是一个坚实的块,让我们说5种不同颜色的10x10px。您可以将每个发送的电子邮件的图像大小覆盖为块的大小。然后,您将放置电子邮件应用程序的替代模式(即%% 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>