html 仅垂直堆叠的条形图答案

【问题标题】：html only vertically stacked bar charthtml 仅垂直堆叠的条形图
【发布时间】：2020-11-02 01:45:14
【问题描述】：

我正在尝试创建一个垂直堆叠的条形图以在电子邮件中使用；客户端主要是 Outlook 2016。

我不想使用图像，因为在我的场景中，总是会要求用户下载图像并且可能不会打扰。 Outlook 不支持带有位置的 jQuery、JavaScript 或 divs。

这是我必须生成两个相同的条的非常简单的代码（是的，我知道这很可怕）：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <body>
    <table>
      <tr>
        <td style="height:10px">
          <table style="border: none;border-collapse: collapse;">
            <tr>
              <td style="height:10px">
                <table style="border: none;
                    border-collapse: collapse;width:40px;
                    mso-table-lspace:0pt;
                    mso-table-rspace:0pt;">
                  <tr>
                    <td style="height:50px;background-color:red;">
                      <p>1</p>
                    </td>
                  </tr>
                </table>
                <table style="border: none;
                    border-collapse: collapse;width:40px;
                    mso-table-lspace:0pt; mso-table-rspace:0pt;">
                  <tr>
                    <td style="height:10px;background-color:green;">
                      <p>1</p>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="height:10px">
                <p>
                  <table style="border: none;
                      border-collapse: collapse;width:40px;
                      mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tr>
                      <td style="height:50px;background-color:red;">
                        <p>1</p>
                      </td>
                    </tr>
                  </table>
                </p>
                <p>
                  <table style="border: none;
                      border-collapse: collapse; width:40px;
                      mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tr>
                      <td style="height:10px;background-color:green;">
                        <p>1</p>
                      </td>
                    </tr>
                  </table>
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>

这很好用，我已经扩展到看起来像这个渲染图表的图表：

但是，当用户在 Outlook 中转发电子邮件时，它会为我添加 <p> 标记并使图表不可读，如下所示：

所以我正在寻找一种方法来欺骗 Outlook，这样它就不会插入 <p> 强制图表在条形中具有空格的标签，或者首先使用另一种方法来创建图表只有 HTML 和 CSS。没有 jQuery，没有 JavaScript，也没有带有浮点数的 divs。

【问题讨论】：

标签： html css charts outlook

【解决方案1】：

从 2007 年到 2019 年的 Windows 上的 Outlook 使用 Word 的渲染引擎，它们确实添加了很多 <p> 和其他内容。据我所知，没有办法阻止这种情况。但是，如果您首先使用适当的样式添加它们（margin:0 重置默认段落样式），您应该没问题。但是在您的示例中，您甚至不需要首先添加段落。这是从您的代码简化的完整工作示例（我在真实的 Outlook 2019 上对此进行了测试，并且代码在回复或转发时保持稳定）：

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacked bar chart</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:50px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:10px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:10px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:50px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

如果这对您不起作用，另一种方法可能是use VML to render the entire graph。但这仅适用于使用 Word 渲染引擎或兼容 VML 的 Outlook 客户端。

【讨论】：

谢谢你，这真是一种享受！主要区别是 role="presentation" 属性吗？
没有。 role="presentation" 主要是出于可访问性的原因（以防止屏幕阅读器大声读出所有表格结构）。我的代码示例中最大的不同是删除了您拥有的<p>，并使用了更多默认样式和属性。