我正在使用 kendoui dataviz charts ,我需要将这些图表导出为(。png)或(。jpg)图片格式。 基本上kendoui dataviz图表有一个名为' svg()'的内置方法。
' svg()'返回当前图表的SVG表示。返回的字符串是一个独立的SVG文档。
实施例
var chart = $("#chart").data("kendoChart"); var svgText = chart.svg();现在 svgText 包含图表图像的详细信息。可以告诉我如何将这些数据转换为实际图像格式并弹出另存为提示???
< / p>
代码示例:我试过这个,但它没有提示任何“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>
答案 0 :(得分:7)
更新2
图表现在包含各种导出选项 - PNG,SVG和矢量PDF。请参阅Export demo以供参考。
<强>更新强>
图表现在具有获取导出图像的内置方法(base64编码):
var img = chart.imageDataURL();
我不知道跨浏览器显示“另存为”对话框的方式。
另请参阅:API Reference
原始回复如下:
无法在浏览器中导出图表图像。我们准备了一个演示,演示如何使用Inkscape将SVG文档转换为服务器上的PNG / PDF。
演示应用程序在ASP.NET MVC中实现,但不依赖于它的任何功能,可以移植到其他框架。
您可以在GitHub上找到该演示:
https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export
答案 1 :(得分:0)
<强>的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);
}
}