$(function() {
var chart = $("#chart").dxChart({
palette: "Violet",
dataSource: dataSource,
commonSeriesSettings: {
barPadding: 0.3,
argumentField: "state",
type: "bar"
},
series: [
{
valueField: "year1990",
name: "1990"
},
{
valueField: "year2000",
name: "2000"
},
{
valueField: "year2010",
name: "2010"
},
{
valueField: "year2016",
name: "2016"
},
{
valueField: "year2017",
name: "2017"
}
],
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
title: {
text: "Oil Production",
subtitle: {
text: "(in millions tonnes)"
}
}
}).dxChart("instance");
$("#export").dxButton({
icon: "export",
text: "Export",
type: "default",
width: 145,
onClick: function() {
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.svg()
+ '</g>'
+ '</svg>';
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart-demo">
<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>
<path d="M 638 365 L 630 396 L 799 396 L 807 365" fill="#6D39C3"></path>
<path d="M 609 376 L 601 407 L 770 407 L 778 376" 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>
<text x="650" y="385"
style="opacity: 0.8;fill: #FFFFFF;font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;font-size: 12px;">UNdata (www.data.un.org)</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>
<div id="chart"></div>
</div>
<div class="controls-pane">
<div id="export"></div>
</div>
</div>
</div>
</body>
</html>
#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;
}
var dataSource = [{
state: "Saudi Arabia",
year1990: 319.6,
year2000: 408.4,
year2010: 407,
year2016: 523,
year2017: 496.6
}, {
state: "USA",
year1990: 362.8,
year2000: 287.9,
year2010: 270.2,
year2016: 438,
year2017: 461.4
}, {
state: "China",
year1990: 138.3,
year2000: 163,
year2010: 203,
year2016: 199.7,
year2017: 191.5
}];