सेव-विंडो के रूप में पॉप-अप करके (.png) या (.jpg) छवि प्रारूप में केंडौई डेटाविज़ चार्ट को कैसे निर्यात करें?

Question

मैं kendoui DATAVIZ चार्ट उपयोग कर रहा हूँ, और मैं या (.jpg) छवि प्रारूप (.png) में उन चार्ट निर्यात करने के लिए की जरूरत है। मूल रूप से केंडौई डाटाविज़ चार्ट में एक अंतर्निहित विधि है जिसे 'svg()' कहा जाता है।

'svg()' वर्तमान चार्ट का एसवीजी प्रतिनिधित्व देता है। लौटाई गई स्ट्रिंग एक स्वयं निहित एसवीजी दस्तावेज़ है।

उदाहरण

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

अब svgText मुझे बताओ कि वास्तविक छवि प्रारूप करने के लिए इन आंकड़ों को बदलने और पॉप अप शीघ्र के रूप में एक सहेजें किसी image..can चार्ट का विवरण होता है ???

कोड उदाहरण: मैं इस कोशिश की, लेकिन यह किसी भी '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

अद्यतन 2

चार्ट अब विभिन्न निर्यात विकल्प भी शामिल है - PNG, एसवीजी और एक वेक्टर पीडीएफ। संदर्भ के लिए Export demo देखें।

अद्यतन

चार्ट अब निर्यात छवि प्राप्त करने के लिए निर्मित विधि (बेस 64 इनकोडिंग) है:

var img = chart.imageDataURL(); 

मैं एक क्रॉस-ब्राउज़र रास्ते के बारे में पता नहीं कर रहा हूँ एक प्रदर्शित करने के लिए "के रूप में सहेजें" संवाद।

यह भी देखें: API Reference

मूल प्रतिक्रिया इस प्रकार है:

चार्ट छवि निर्यात में ब्राउज़र संभव नहीं है। हमने एक डेमो तैयार किया है जो दिखाता है कि एसवीजी दस्तावेज़ को इंकस्केप का उपयोग कर सर्वर पर पीएनजी/पीडीएफ में कैसे परिवर्तित किया जाए।

डेमो एप्लिकेशन एएसपी.नेट एमवीसी में लागू किया गया है, लेकिन इसकी किसी भी विशेषताओं पर निर्भर नहीं है और इसे अन्य ढांचे में पोर्ट किया जा सकता है।

आप GitHub पर डेमो पा सकते हैं:

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

Answer 2

यू इस तरह कर सकते हैं। इस दृष्टिकोण के लिए आपको svg.dll यू इस लिंक से डाउनलोड कर सकते हैं।

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

जावास्क्रिप्ट:

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

नियंत्रक:

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

     } 
    }