ð电子邮件中的非图像方法在电子邮件中
#html #css #email #datavisualization

HTML电子邮件的工具箱有限，用于数据可视化。诸如D3.js之类的复杂工具不可用于电子邮件开发。结果，图像已成为在电子邮件中显示数据的最常见媒介。这条路线带有许多缺点：

  • 屏幕读取器无法访问（除非使用<alt>标签正确使用）
  • 图像自动加载可以阻止用户看到数据视觉效果
  • 不是兼容的黑模式
  • 有助于总的电子邮件加载时间，尤其是当未优化图像
    • 时

是否有另一种方法可以在不依赖图像的电子邮件模板中显示数据？电子邮件是否可以在没有图像的情况下具有清晰，丰富多彩和引人入胜的数据视觉效果？

是的，通过使用<table>元素，您可以创建多功能的水平条形图，垂直条形图和进度条。与使用图像相比，此方法具有不同的优势和缺点。

让我们使用<table>元素构建条形图 -

从<table>元素和数据栏名称，数据栏和End标签的<td>单元格开始。在此图表示例中，名称和终点标签将位于数据栏外部。

<table width="600">
  <tr>
    <td>Data bar #1</td> <!-- Data bar name -->
    <td></td> <!-- Data bar -->
    <td>Label #1</td> <!-- End label -->
  </tr>
</table>

为每个<td>单元定义height和width。

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 65%;" height="24" width="65%"></td>
    <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #1</td>
  </tr>
</table>

databar1

调整宽度值以更改数据栏的大小。由于所有三列都共享宽度百分比，因此请确保所有<td>细胞总计高达100％。

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td> <!-- The data bar width was reduced from 65% to 35%. The difference is added to the `<td>` cell below. -->
    <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
  </tr>
</table>

要创建第二个数据栏，请在新的<table>，<tr>和<td>元素中嵌套代码。这将使您能够对每个水平数据栏之间的间距进行更多控制。使用外部<td>单元格中的填充调整间距。

<table>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
          <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #2</td>
          <td style="background-color: #0d5fbd; height: 24px; width: 65%;" height="24" width="65%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

databar2

现在，为每个数据栏重复每个单独的数据栏的<tr>部分，并为此条形图调整每个<td>单元的background-color，宽度和标签。

barchart1

这是如何使用<table>元素来创建水平条形图的一个示例。

HTML/CSS条形图的优点

使用<table>元素构建的图表比图像具有许多优点：

  • 图表可以通过使用媒体查询和字体大小的调整来响应移动图表
  • 与下载图像相比，图表的加载时间更快
  • html/css编码图使用实时文本，数字和标签，可以由屏幕阅读器挑选
  • 可以查看图表，而无需下载任何图像
  • 可以是动态的。由于数据栏宽度，图表号，标签文本和颜色在HTML/CSS中进行编码，因此可以将这些字段设置为ESP中的变量，并使用更新的JSON DATA
    • 进行动态渲染。
  • 与图像相比，图表在黑暗模式下更兼容

HTML/CSS条形图的缺点

但是，有一些编码条形图的缺点：

  • 只能通过此方法创建水平和垂直条形图和进度条。对于更复杂的图表（即圆形图，高度详细，复杂图表），图像是唯一的选项
  • 增加了电子邮件文件的重量，冒着102KB gmail剪辑的风险
  • 耗时且乏味地编码和构建单个图表*

*使用Email Chart Builder工具缩短构建条形图所需的时间。

结论

图像不是在电子邮件中显示清晰，多彩和引人入胜的数据视觉效果的唯一方法。通过使用<table>元素，电子邮件可以具有多功能水平和垂直条形图以及进度条。