<div class="chart_environment">
<div id="custom_markup_container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="820px" height="420px">
<path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
<path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
<text transform="translate(30,89)"
style="fill: #FFFFFF; font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif; font-size: 36px; font-weight: bold;">
<tspan x="0" y="0">Export </tspan>
<tspan x="0" y="38">Custom</tspan>
<tspan x="0" y="76">Markup</tspan>
</text>
<text transform="translate(32,199)"
style="opacity: 0.8; fill: #FFFFFF;font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;font-size: 14px;">
<tspan x="0" y="0">Export a chart with</tspan>
<tspan x="0" y="19.2">custom elements</tspan>
</text>
<path opacity="0.8" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" stroke-width="1"
stroke-linecap="butt" fill="none" stroke-linejoin="miter"></path>
</svg>
</div>
@section ExternalDependencies {
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
}
@(Html.DevExtreme().Chart()
.ID("chart")
.Palette(VizPalette.Violet)
.CommonSeriesSettings(s => s
.ArgumentField("State")
.Type(SeriesType.Bar)
.BarPadding(0.3)
)
.Series(s => {
s.Add().ValueField("Year1990").Name("1990");
s.Add().ValueField("Year2000").Name("2000");
s.Add().ValueField("Year2010").Name("2010");
s.Add().ValueField("Year2016").Name("2016");
s.Add().ValueField("Year2017").Name("2017");
})
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.Title(t => t
.Text("Oil Production")
.Subtitle(s => s.Text("(in millions tonnes)"))
)
.DataSource(new object[] {
new { State = "Saudi Arabia", Year1990 = 319.6, Year2000 = 408.4, Year2010 = 407, Year2016 = 523, Year2017 = 496.6 },
new { State = "USA", Year1990 = 362.8, Year2000 = 287.9, Year2010 = 270.2, Year2016 = 438, Year2017 = 461.4 },
new { State = "China", Year1990 = 138.3, Year2000 = 163, Year2010 = 203, Year2016 = 199.7, Year2017 = 191.5 }
})
)
</div>
<div class="controls-pane">
@(Html.DevExtreme().Button()
.Icon("export")
.Text("Export")
.OnClick("exportChart")
.Type(ButtonType.Default)
.Width(145)
)
</div>
<script>
function exportChart() {
DevExpress.viz.exportFromMarkup(prepareMarkup(), {
width: 820,
height: 420,
margin: 0,
format: "png",
svgToCanvas: function(svg, canvas) {
var deferred = $.Deferred();
canvas.getContext('2d')
.drawSvg(new XMLSerializer().serializeToString(svg), 0, 0, null, null, {
renderCallback: deferred.resolve
});
return deferred.promise();
}
});
}
function prepareMarkup() {
return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">'
+ $("#custom_markup_container").html()
+ '<g transform="translate(305,12)">'
+ $('#chart').dxChart("instance").svg()
+ '</g>'
+ '</svg>';
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult ExportCustomMarkup() {
return View();
}
}
}
#chart-demo {
height: 460px;
}
#chart {
position: absolute;
top: 12px;
right: 35px;
width: 480px;
height: 347px;
}
.chart_environment {
width: 820px;
position: relative;
margin: 0 auto;
}
.controls-pane {
text-align: center;
}