Question

我正在使用Zapier来安排每月使用GoogleSheets数据填充的电子邮件。数据非常简单;它具有分量 - 等级（即4.5 / 5）和％接通时间（即89％）。

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

我想找到一种可视化表示数据的方法。我希望表示是动态的并自动更新，因此创建图表图像不是一种选择（这些电子邮件将导致约40人）。

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

以下是饼图的代码：

<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中，而不仅仅是在Mail App中？查看此电子邮件的所有人都将通过他们的Gmail帐户进行此操作。

非常感谢任何建议。

Answer 1

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

当采用对新的，花哨的CSS属性的支持时，电子邮件往往落后于浏览器。 Campaign Monitor在几个流行的电子邮件客户端中汇总了http://guides.rubyonrails.org/form_helpers.html#dealing-with-ajax CSS支持。您会看到GMail不支持您在代码中使用的所有box-shadow，clip或position。虽然未在该指南中列出，但transform属性为this handy breakdown。这意味着，如果有的话，至少几年内，任何电子邮件客户端都可能不会支持它。

在为电子邮件编写HTML时，我建议通过电子邮件测试工具运行它。我个人最喜欢的是PutsMail（免费）：still in the experimental stage。

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

1 个答案: