Come esportare il grafico di kendoui dataviz in formato (.png) o (.jpg) aprendo la finestra Salva-come?

Question

Sto usando kendoui DataViz classifiche, e ho bisogno di esportare tali grafici in (.png) o (.jpg) formato immagine. In sostanza il grafico kendoui dataviz ha un metodo incorporato chiamato 'svg()'.

'svg()' Restituisce la rappresentazione SVG del grafico corrente. La stringa restituita è un documento SVG autonomo.

Esempio

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

Ora svgText contiene i dettagli di grafico image..can qualcuno dirmi come convertire questi dati in formato immagine reale e pop-up un Salva con nome pronta ???

codice di esempio: ho provato questo, ma non richiede alcun pop-up 'Salva con nome'

 <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

Il Grafico ora include diverse opzioni di esportazione - PNG, SVG e un PDF vettoriale. Vedere lo Export demo come riferimento.

UPDATE

Il Grafico ora ha metodo incorporato per ottenere l'immagine esportata (Base64 codificato):

var img = chart.imageDataURL(); 

Io non sono a conoscenza di un modo cross-browser per visualizzare un Finestra di dialogo "Salva come".

Consulta anche: API Reference

risposta originale segue:

esportatori l'immagine del grafico nel browser non è possibile. Abbiamo preparato una demo che mostra come convertire il documento SVG in PNG/PDF sul server usando Inkscape.

L'applicazione demo è implementata in ASP.NET MVC, ma non dipende da nessuna delle sue funzionalità e può essere trasferita su altri framework.

Potete trovare la demo su GitHub:

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

Answer 2

U può fare in questo modo. Per questo approccio è necessario svg.dll U può scaricare da questo link.

• 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"; 
     } 
    }); 

Controller:

[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); 

     } 
    }