2016-07-21 9 views
0

私は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アカウントからそうしています。

どのような提案も大変ありがとうございます。

答えて

0

最も人気のあるメールクライアントでサポートされていない新しいCSSプロパティを使用しているようです。あなたのCSSはブラウザで見たときうまくレンダリングされますが、必ずしも電子メールでうまく表示されるとは限りません。

新しい、派手なCSSプロパティのサポートを採用することになると、電子メールはブラウザに遅れがちになりがちです。キャンペーンモニタは、複数の一般的な電子メールクライアントにCSSサポートのthis handy breakdownをまとめています。 Gmailでbox-shadowclip、またはpositionをサポートしていないことがわかります。これらはすべてあなたのコードで使用しています。このガイドに記載されていないが、transformプロパティはstill in the experimental stageです。これは、もしあれば、少なくとも数年間、どの電子メールクライアントでもサポートされない可能性があることを意味します。

電子メール用にHTMLを記述するときは、電子メールテスターツールを使用して実行することをおすすめします。私の個人的なお気に入りはPutsMail(無料):https://putsmail.com/tests/newです。

関連する問題