Jak wyeksportować wykres danych Kendoui do formatu obrazu (.png) lub (.jpg), wyświetlając okno Zapisz jako?

Question

Używam kendoui DataViz wykresy, i muszę wyeksportować te wykresy w (.png) lub (.jpg) formatu obrazu. Zasadniczo wykres danych Kendoui Dataviz ma wbudowaną metodę o nazwie "svg()".

'svg()' Zwraca reprezentację SVG bieżącego wykresu. Zwrócony ciąg jest samodzielnym dokumentem SVG.

Przykład

var chart = $("#chart").data("kendoChart"); 
var svgText = chart.svg();

Teraz svgText zawiera szczegółowe informacje na wykresie image..can ktoś może mi powiedzieć, jak przekonwertować te dane do formatu obrazu rzeczywistego i pop-up zapisać jako szybkiego ???

przykładowy kod: Próbowałem, ale to nie pyta żadnego okienko '' saveas

 <div id="example" class="k-content"> 
       <div class="chart-wrapper"> 
        <div id="chart"></div> 
        <center> 
         <div> 
          <input type="button" value="click" onclick="disp();" /> 
         </div> 
        </center> 
        <div> 
     <canvas id="canvas"></canvas> 
     </div> 
     </div> 
      </div> 


      <script type="text/javascript"> 

      function disp() { 
       var chart = $("#chart").data("kendoChart"); 
       var svgText = chart.svg(); 
       var c = document.getElementById('canvas'); 
       canvg(c,svgText); 
       var img = c.toDataURL("image/png"); 
       document.write('<img src="' + img + '"/>'); 
       window.win = open(imgOrURL); 
       setTimeout('win.document.execCommand("SaveAs")', 100); 
       } 

       function createChart() { 
       $("#chart").kendoChart({ 
        theme: $(document).data("kendoSkin") || "default", 
        title: { 
         text: "Internet Users" 
        }, 
        legend: { 
         position: "bottom" 
        }, 
        chartArea: { 
         background: "" 
        }, 
        seriesDefaults: { 
         type: "bar" 
        }, 
        series: [{ 
         name: "World", 
         data: [15.7, 16.7, 20, 23.5, 26.6] 
        }, { 
         name: "United States", 
         data: [67.96, 68.93, 75, 74, 78] 
        }], 
        valueAxis: { 
         labels: { 
          format: "{0}%" 
         } 
        }, 
        categoryAxis: { 
         categories: [2005, 2006, 2007, 2008, 2009] 
        }, 
        tooltip: { 
         visible: true, 
         format: "{0}%" 
        } 
       }); 
      } 

      $(document).ready(function() { 
       setTimeout(function() { 
        createChart(); 

       },100); 


       $(document).bind("kendo:skinChange", function (e) { 
        createChart(); 
        }); 
      }); 
    <script>      

Answer 1

UPDATE 2

Wykres obejmuje obecnie różne opcje eksportu - PNG, SVG oraz wektor PDF. Zobacz numer Export demo w celach informacyjnych.

UPDATE

Wykres teraz ma wbudowaną Sposób otrzymywania wyeksportowany obraz (zakodowane base64):

var img = chart.imageDataURL(); 

nie jestem świadomy sposób przeglądarki do wyświetlania Okno "Zapisz jako".

Zobacz także: API Reference

Original odpowiedź następująco:

Eksportowanie obrazu wykresu w przeglądarce nie jest możliwe. Przygotowaliśmy demo, które pokazuje, jak przekonwertować dokument SVG do formatu PNG/PDF na serwerze za pomocą Inkscape.

Aplikacja demonstracyjna jest zaimplementowana w środowisku ASP.NET MVC, ale nie jest zależna od żadnej z jej funkcji i może zostać przeniesiona do innych frameworków.

można znaleźć demo na GitHub:

https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export

Answer 2

U można zrobić w ten sposób. Dla tego podejścia potrzebujesz svg.dll U można pobrać z tego łącza.

• http://svg.codeplex.com/releases/view/18884

JavaScript:

var chart = $("#chart").data("kendoChart"); 
var svgString = escape(chart.svg()); 
    $.ajax({ 
     url: "/MyController/Sample", 
     data: { svg: svgString }, 
     async: false, 
     type: 'Post', 
     success: function (data) { 
      window.location = "/MyController/getPdf"; 
     } 
    }); 

Kontroler:

[HttpPost] 
    [ValidateInput(false)] 
    public void Sample(string svg) 
    { 
     var svgText = System.Web.HttpUtility.UrlDecode(svg); 
     Session["chrtData"] = svgText; 
    } 

    public void getPdf() 
    { 
     string svgText = Session["chrtData"].ToString(); 

     var byteArray = Encoding.ASCII.GetBytes(svgText); 
     using (var stream = new MemoryStream(byteArray)) 
     { 
      var svgDocument = Svg.SvgDocument.Open(stream); 
      //First Way 

      var bitmap = svgDocument.Draw(); 
      MemoryStream docMemStream = new MemoryStream(); 
      bitmap.Save("D:\\hi.png", System.Drawing.Imaging.ImageFormat.Png); 

     } 
    }