私はZapierを使用して、GoogleSheetsからのデータが入力される毎月の電子メールをスケジュールします。データは非常に単純です。それは定格(すなわち、4.5/5)と%オン時間(すなわち89%)の成分を有する。Zapierから送信されたときに純粋なHTMLチャートがGmailに表示されない
ザピアでは、Gmailでメールを送信することができます。この場合、作成するコードはすべてHTMLで記述する必要があります。
データを視覚的に表現する方法を探したかったのです。私は表現が動的で自動的に更新されるようにしたいので、チャートの画像を作成することはオプションではありません(これらのメールは約40人になります)。
こうして、私は純粋なHTMLチャートをコード化することに決めました。ただし、コードを使用して(現時点ではインターネット上のものであり、まったく変更されていない)、自分のコンピュータのChromeまたはSafariのGmailに円グラフが表示されません。しかし、私の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でだけでなく、メールアプリケーションに表示されるように取得する方法を見つけ出す手助けすることはできますか?このメールを見ているすべての人は、自分のGmailアカウントからそうしています。
どのような提案も大変ありがとうございます。