Làm cách nào để xuất biểu đồ kendoui dataviz sang định dạng hình ảnh (.png) hoặc (.jpg) bằng cách bật lên cửa sổ Lưu dưới dạng?

Question

Tôi đang sử dụng kendoui DataViz bảng xếp hạng, và tôi cần có thể export các bảng xếp hạng vào (.png) hoặc định dạng hình ảnh (.jpg). Biểu đồ cơ bản kendoui dataviz có phương thức tích hợp được gọi là 'svg()'.

'svg()' Trả về biểu diễn SVG của biểu đồ hiện tại. Chuỗi trả về là một tài liệu SVG khép kín.

Ví dụ

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

Bây giờ svgText chứa các chi tiết của biểu đồ image..can ai cho tôi biết làm thế nào để chuyển đổi những dữ liệu này sang định dạng hình ảnh thực tế và bật lên một Lưu Như nhắc ???

mã ví dụ: Tôi cố gắng này, nhưng nó không nhắc bất kỳ 'SaveAs' popup

 <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

Các Chart hiện nay bao gồm các tùy chọn xuất khác nhau - PNG, SVG và một vector PDF. Xem Export demo để tham khảo.

CẬP NHẬT

Các Chart hiện nay đã được xây dựng trong phương pháp cho việc thu thập các hình ảnh xuất khẩu (mã hóa base64):

var img = chart.imageDataURL(); 

Tôi không nhận thức được một cách qua trình duyệt để hiển thị một Hộp thoại "Lưu dưới dạng".

Xem thêm: API Reference

phản ứng gốc sau:

Xuất hình ảnh Chart trong trình duyệt là không thể. Chúng tôi đã chuẩn bị một bản trình diễn cho thấy cách chuyển đổi tài liệu SVG sang PNG/PDF trên máy chủ bằng Inkscape.

Ứng dụng demo được triển khai trong ASP.NET MVC, nhưng không phụ thuộc vào bất kỳ tính năng nào của nó và có thể được chuyển sang các khung công tác khác.

Bạn có thể tìm thấy những bản demo trên GitHub:

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

Answer 2

U có thể làm như thế này. Đối với phương pháp này u cần svg.dll U có thể tải xuống từ liên kết này.

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

Bộ điều khiển:

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

     } 
    }