Как экспортировать диаграмму данных Kendoui в (.png) или (.jpg) формат изображения, открыв окно Сохранить как? - PullRequest
Новая
       30

Как экспортировать диаграмму данных Kendoui в (.png) или (.jpg) формат изображения, открыв окно Сохранить как?

10 голосов
/ 08 февраля 2012

Я использую диаграммы Кэндуи Датавиза , и мне нужно экспортировать эти диаграммы в (. Png) или (. Jpg) формат изображения.По сути, в диаграмме данных Кэндуи есть встроенный метод, называемый svg () .

' svg () ' Возвращает представление SVG текущего графика.Возвращаемая строка является автономным документом SVG.

Пример 

var chart = $("#chart").data("kendoChart");
var svgText = chart.svg();
Теперь svgText содержит детали изображения диаграммы. Кто-нибудь может сказать мне, как преобразовать эти данные в фактический формат изображения ивсплывающее приглашение Сохранить как ???

Пример кода: я пробовал это, но он не запрашивает всплывающее окно «Сохранить как» 

     <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>

Ответы [ 2 ]

7 голосов
/ 01 марта 2012

ОБНОВЛЕНИЕ 2

Диаграмма теперь включает различные параметры экспорта - PNG, SVG и векторный PDF.См. Экспорт демо для справки.

ОБНОВЛЕНИЕ

Диаграмма теперь имеет встроенный метод для получения экспортированного изображения (в кодировке base64):

var img = chart.imageDataURL();

Мне неизвестен кросс-браузерный способ отображения диалогового окна «Сохранить как».

См. Также: Справочник по API

Исходный ответ следующий:

Экспорт изображения диаграммы в браузере невозможен.Мы подготовили демонстрационную версию, в которой показано, как преобразовать документ SVG в формат PNG / PDF на сервере с помощью Inkscape.

Демонстрационное приложение реализовано в ASP.NET MVC, но не зависит от каких-либо его возможностей иможно портировать на другие фреймворки.

Демонстрацию можно найти на GitHub:

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

0 голосов
/ 23 октября 2013

U может сделать это так. Для этого подхода вам нужно svg.dll Вы можете скачать по этой ссылке.

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

Контроллер: 

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

        }
     }
...