Ich verwende Zapier, um monatliche E-Mails zu planen, die mit Daten aus GoogleSheets gefüllt sind. Die Daten sind sehr einfach. es hat Komponenten - die Bewertung (d. h. 4,5/5) und die Einschaltdauer (%) (d. h. 89%).Reines HTML-Diagramm wird in Google Mail nicht angezeigt, wenn es über Zapier gesendet wird
In Zapier können Sie nur eine E-Mail über Google Mail senden, die erfordert, dass der von Ihnen geschriebene Code in HTML ist.
Ich wollte einen Weg finden, meine Daten visuell darzustellen. Ich möchte, dass die Darstellung dynamisch und automatisch aktualisiert wird, daher ist das Erstellen von Bildern von Diagrammen keine Option (diese E-Mails gehen an ~ 40 Personen).
So entschied ich mich, ein reines HTML-Diagramm zu kodieren. Wenn ich jedoch den Code verwende (aus dem Internet gefunden und im Moment überhaupt nicht geändert), erscheint das Kreisdiagramm nicht auf meinem Google Mail in Chrome oder Safari auf meinem Computer. Es erscheint jedoch auf meinem iPhone in der Mail App, nicht aber in der Gmail App. Hier
ist der Code für das Kreisdiagramm insbesondere:
<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>
Kann jemand mir helfen herauszufinden, wie diese Tabelle in Google Mail angezeigt zu bekommen und nicht nur in dem Mail-App? Alle Personen, die diese E-Mail betrachten, tun dies über ihre Google Mail-Konten.
Alle Vorschläge werden sehr geschätzt.