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 アカウントからそうしています。
どんな提案でも大歓迎です。