如何通过弹出"另存为"窗口将kendoui dataviz图表导出为(.png)或(.jpg)图像格式？

Question

如何通过弹出"另存为"窗口将kendoui dataviz图表导出为(.png)或(.jpg)图像格式？

Tri*_*das 10 charts png jpeg export kendo-ui

我正在使用kendoui dataviz图表,我需要将这些图表导出为(.png)或(.jpg)图像格式.基本上kendoui dataviz图表有一个名为' svg() ' 的内置方法.

' svg() '返回当前图表的SVG表示.返回的字符串是一个独立的SVG文档.

例

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

现在svgText包含图表图像的详细信息.可以告诉我如何将这些数据转换为实际图像格式并弹出另存为提示???

代码示例:我试过这个,但它没有提示任何'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>

Run Code Online (Sandbox Code Playgroud)