通过 Zapier 发送纯 HTML 图表不会出现在 Gmail 中答案

【问题标题】：Pure HTML Chart Won't Appear in Gmail When Sent Through Zapier通过 Zapier 发送纯 HTML 图表不会出现在 Gmail 中
【发布时间】：2016-11-25 15:37:31
【问题描述】：

我正在使用 Zapier 来安排每月发送的电子邮件，这些电子邮件中填充了来自 GoogleSheets 的数据。数据很简单；它有组成部分——评级（即 4.5/5）和准时百分比（即 89%）。

在 Zapier 中，您只能通过 gmail 发送电子邮件，这要求您编写的任何代码都必须是 HTML。

我想找到一种方法来直观地表示我的数据。我希望表示是动态的并自动更新，因此创建图表图像不是一种选择（这些电子邮件将发送给约 40 人）。

因此，我决定编写一个纯 HTML 图表。但是，当我使用代码（从互联网上找到并且目前根本没有修改）时，饼图不会出现在我的 Gmail 上的 Chrome 或我计算机上的 Safari 上。但是，它确实出现在我的 iPhone 上的邮件应用程序中，而不是在 Gmail 应用程序中。

这里是饼图的代码：

<head>
  <title> Pie </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>


<style>
    .pieContainer {
          height: 100px;
     }
     .pieBackground {
          background-color: grey;
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     }
     .pie {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 50px, 100px, 0px);
     }
     .hold {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 100px, 100px, 50px);
     }

     #pieSlice1 .pie {
          background-color: #1b458b;
          -webkit-transform:rotate(150deg);
          -moz-transform:rotate(150deg);
          -o-transform:rotate(150deg);
          transform:rotate(150deg);
     }
     #pieSlice2 {
          -webkit-transform:rotate(150deg);
          -moz-transform:rotate(150deg);
          -o-transform:rotate(150deg);
          transform:rotate(150deg);
     }
     #pieSlice2 .pie {
          background-color: #ccbb87;
          -webkit-transform:rotate(40deg);
          -moz-transform:rotate(40deg);
          -o-transform:rotate(40deg);
          transform:rotate(40deg);
     }
     #pieSlice3 {
          -webkit-transform:rotate(190deg);
          -moz-transform:rotate(190deg);
          -o-transform:rotate(190deg);
          transform:rotate(190deg);
     }
     #pieSlice3 .pie {
          background-color: #cc0000;
          -webkit-transform:rotate(70deg);
          -moz-transform:rotate(70deg);
          -o-transform:rotate(70deg);
          transform:rotate(70deg);
     }
     #pieSlice4 {
          -webkit-transform:rotate(260deg);
          -moz-transform:rotate(260deg);
          -o-transform:rotate(260deg);
          transform:rotate(260deg);
     }
     #pieSlice4 .pie {
          background-color: #cc00ff;
          -webkit-transform:rotate(100deg);
          -moz-transform:rotate(100deg);
          -o-transform:rotate(100deg);
          transform:rotate(100deg);
     }
</style>

<div class="pieContainer">
     <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold"><div class="pie"></div></div>
     <div id="pieSlice2" class="hold"><div class="pie"></div></div>
     <div id="pieSlice3" class="hold"><div class="pie"></div></div>
     <div id="pieSlice4" class="hold"><div class="pie"></div></div>
</div>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>

谁能帮我弄清楚如何让这个图表出现在 Gmail 而不仅仅是邮件应用程序中？所有查看这封电子邮件的人都将通过他们的 gmail 帐户进行查看。

非常感谢任何建议。

【问题讨论】：

标签： html email charts pie-chart zapier

【解决方案1】：

您似乎正在使用一些较新的 CSS 属性，而这些属性在最流行的电子邮件客户端中不受支持。虽然您的 CSS 在浏览器中查看时会很好地呈现，但在电子邮件中可能不一定会很好地呈现。

在采用对新奇的 CSS 属性的支持方面，电子邮件往往落后于浏览器。 Campaign Monitor 整合了多个流行电子邮件客户端的 CSS 支持 this handy breakdown。您会看到 GMail 不支持 box-shadow、clip 或 position，您在代码中使用的所有这些。虽然该指南中未列出，但transform 属性为still in the experimental stage。这意味着它可能至少在几年内（如果有的话）都不会在任何电子邮件客户端中得到支持。

在为电子邮件编写 HTML 时，我建议通过电子邮件测试工具运行它。我个人最喜欢的是 PutsMail（免费）：https://putsmail.com/tests/new。

【讨论】：