2015-08-04 6 views
3

Я хочу отправить линейную диаграмму в теле электронной почты, используя ASP.Net и C#. Я написал код, чтобы показать диаграмму в теге div. Я хочу отправить линейную диаграмму по почте. Как это сделать?Отправить диаграмму по электронной почте

My Code: jQuery 

    var chartData; 
    google.load("visualization", "1", { packages: ["corechart"] }); 

    function Chart() { 
     $.ajax({ 
      url: "HHT_Tracking.aspx/GetData", 
      data: "", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; chartset=utf-8", 
      success: function (data) { 
       chartData = data.d; 
      }, 
      error: function() { 
       alert("Error loading data! Please try again."); 
      } 
     }).done(function() { 
      //google.setOnLoadCallback(drawChart); 
      drawChart(); 
     }); 
    }; 

    function drawChart() { 
     var data = google.visualization.arrayToDataTable(chartData); 

     var options = { 
      title: "Server Monitoring Date Wise", 
      pointSize: 5, 
      vAxis: { slantedText: true, slantedTextAngle: 90, title: 'MINUTES' } 
     }; 

     var lineChart = new google.visualization.LineChart(document.getElementById('chartDiv')); 

     lineChart.draw(data, options); 
    } 

Source Code: 

    <tr> 
     <td> 
      <div id="chartDiv" style="width: 100%; height: 700px"></div> 
     </td> 
    </tr> 

ответ

2
код

Flow:

головка тег:

<head runat="server"> 
 
    <title></title> 
 
    <script type="text/javascript" 
 
      src="https://www.google.com/jsapi?autoload={ 
 
      'modules':[{ 
 
       'name':'visualization', 
 
       'version':'1', 
 
       'packages':['corechart'] 
 
      }] 
 
      }"></script> 
 
    
 
<script type="text/javascript"> 
 
     google.setOnLoadCallback(drawChart); 
 
     function drawChart() { 
 
      var data = google.visualization.arrayToDataTable([ 
 
       ['Year', 'Sales', 'Expenses'], 
 
       ['2004', 1000, 400], 
 
       ['2005', 1170, 460], 
 
       ['2006', 660, 1120], 
 
       ['2007', 1030, 540] 
 
      ]); 
 

 
      var options = { 
 
       title: 'Company Performance', 
 
       curveType: 'function', 
 
       legend: { position: 'bottom' } 
 
      }; 
 

 
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
      var txtBase64 = document.getElementById('txtBase64Image'); 
 
      google.visualization.events.addListener(chart, 'ready', function() { 
 
       txtBase64.value = chart.getImageURI(); 
 
      }); 
 
      chart.draw(data, options); 
 
     } 
 
    </script> 
 
</head>

тег Body:

<body> 
 
    <form id="form1" runat="server"> 
 
     <div id="curve_chart" style="width: 900px; height: 500px"></div> 
 
     <%--If you want, you can textbox visible false.--%> 
 
     <asp:TextBox ID="txtBase64Image" runat="server" Width="600" TextMode="MultiLine"></asp:TextBox><br/> 
 
     <asp:Button ID="Button1" runat="server" Text="Send Mail" OnClick="Button1_Click" /> 
 
    </form> 
 
</body>

После C# код:

public Image Base64ToImage(string base64String) 
{ 
    var imageBytes = Convert.FromBase64String(base64String); 
    using (var ms = new MemoryStream(imageBytes, 0, imageBytes.Length)) 
    { 
     var image = Image.FromStream(ms, true); 
     return image; 
    } 
} 

Кнопка нажмите: Отправить по почте диаграммы. Look EmailSender https://github.com/serkomut/Serkomut.MailSender

protected void Button1_Click(object sender, EventArgs e) 
{ 
    var split = txtBase64Image.Text.Split(',')[1]; 
    var image = Base64ToImage(split); 
    var stream = new MemoryStream(); 
    image.Save(stream, ImageFormat.Jpeg); 
    stream.Position = 0; 

    var result = new EmailSender() 
        .FromHost("smtp.gmail.com") 
        .Credential("[email protected]", "mailPassword") 
        .FromTo(new Message 
        { 
         From = "[email protected]", 
         To = "[email protected]" 
        }) 
        .Subject("Subject") 
        .Body("Content text...") 
        .Attachment(new Attachment(stream, "chart_image.jpg", "image/jpg")) 
        .Send(); 
} 
2

Предполагая, что вы используете System.Web.UI.DataVisualization для построения графиков, то chart класса имеет метод SaveImage, который можно использовать для сохранения этой диаграммы в виде графика (например png) в поток памяти. Используйте этот поток, чтобы выплескивать data-uri, который затем можно использовать в вашем блоге электронной почты в формате HTML.

Например:

Charting.Chart myChart = new Charting.Chart(); 
System.IO.MemoryStream imgStream = new System.IO.MemoryStream(); 
myChart.SaveImage(imgStream, Charting.ChartImageFormat.Png); 
return "<img class='chartImage' src='data:image/png;base64, " + System.Convert.ToBase64String(imgStream.ToArray()) + "' />"; 

Этот код возвращает img тег с data-uri в качестве своего src, который вы можете использовать в вашем HTML теле электронной почты.

+0

Я не использую контроль диаграммы. Я использую тег div. – thevan

+0

теги @thevan div не создают * диаграммы. Как * вы создаете тележку? Вы используете javascript-библиотеку или серверный код? –

+0

@PanagiotisKanavos Я использовал jQuery. Я отредактировал мой вопрос. Пожалуйста, посмотри на это. – thevan

Смежные вопросы