0

我正在使用 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 帐户进行查看。

任何建议都非常感谢。

4

1 回答 1

0

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

在采用对新奇的 CSS 属性的支持时，电子邮件往往落后于浏览器。Campaign Monitor 汇总了几个流行的电子邮件客户端的 CSS 支持分类。您会看到 GMail 不支持您在代码中使用的所有box-shadow这些clip。position虽然该指南中未列出，但该transform物业仍处于试验阶段。这意味着它可能至少在几年内（如果有的话）不会在任何电子邮件客户端中得到支持。

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

于 2016-08-01T20:50:39.440 回答