0

GoogleSheets からのデータが取り込まれる毎月のメールをスケジュールするために、Zapier を使用しています。データは非常に単純です。評価 (つまり 4.5/5) と % オンタイム (つまり 89%) という構成要素があります。

Zapier では、gmail 経由でのみメールを送信できます。これには、コードを HTML で記述する必要があります。

データを視覚的に表現する方法を見つけたかったのです。表現が動的で自動的に更新されるようにしたいので、グラフの画像を作成することはできません (これらの電子メールは 40 人に送信されます)。

したがって、純粋な HTML チャートをコーディングすることにしました。ただし、コードを使用すると (インターネットで見つけられ、現時点ではまったく変更されていません)、Chrome の Gmail またはコンピューターの 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