<div class="chart_environment">
<div id="custom_markup_container">
<svg 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>
<dx-chart id="chart" [dataSource]="oilProductionData" palette="Violet">
<dxi-series valueField="year1990" name="1990"></dxi-series>
<dxi-series valueField="year2000" name="2000"></dxi-series>
<dxi-series valueField="year2010" name="2010"></dxi-series>
<dxi-series valueField="year2016" name="2016"></dxi-series>
<dxi-series valueField="year2017" name="2017"></dxi-series>
<dxo-common-series-settings argumentField="state" type="bar" [barPadding]="0.3">
</dxo-common-series-settings>
<dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
</dxo-legend>
<dxo-title text="Oil Production">
<dxo-subtitle text="(in millions tonnes)"></dxo-subtitle>
</dxo-title>
</dx-chart>
</div>
<div class="controls-pane">
<dx-button icon="export" text="Export" type="default" [width]="145" (onClick)="export()">
</dx-button>
</div>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule, DxChartComponent, DxButtonModule } from 'devextreme-angular';
import { Service, OilProductionDataItem } from './app.service';
import { exportFromMarkup } from 'devextreme/viz/export';
import canvg from 'canvg';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css']
})
export class AppComponent {
@ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
oilProductionData: OilProductionDataItem[];
constructor(service: Service) {
this.oilProductionData = service.getOilProductionData();
}
export() {
exportFromMarkup(this.prepareMarkup(), {
width: 820,
height: 420,
margin: 0,
format: "png",
svgToCanvas(svg, canvas) {
return new Promise((resolve) => {
canvg(canvas, new XMLSerializer().serializeToString(svg), {
ignoreDimensions: true,
ignoreClear: true,
renderCallback: resolve
});
})
}
});
}
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">'
+ document.getElementById('custom_markup_container').innerHTML
+ '<g transform="translate(305,12)">'
+ this.chart.instance.svg()
+ '</g>'
+ '</svg>';
}
}
@NgModule({
imports: [
BrowserModule,
DxChartModule,
DxButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart-demo {
height: 460px;
}
::ng-deep #chart {
position: absolute;
top: 12px;
right: 35px;
width: 480px;
height: 347px;
}
::ng-deep .chart_environment {
width: 820px;
position: relative;
margin: 0 auto;
}
::ng-deep .controls-pane {
text-align: center;
}
import { Injectable } from '@angular/core';
export class OilProductionDataItem {
state: string;
year1990: number;
year2000: number;
year2010: number;
year2016: number;
year2017: number;
}
let oilProductionData: OilProductionDataItem[] = [{
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
}];
@Injectable()
export class Service {
getOilProductionData(): OilProductionDataItem[] {
return oilProductionData;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.4.5/lib/typescript.js',
'@angular/core': 'npm:@angular/core@8.0.0/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@8.0.0/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@8.0.0/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@8.0.0/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@8.0.0/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@8.0.0/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@8.0.0/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@8.0.0/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'devextreme': 'npm:devextreme@19.2',
'devextreme-angular': 'npm:devextreme-angular@19.2',
'stackblur-canvas': 'npm:stackblur-canvas',
'rgbcolor': 'npm:rgbcolor',
'canvg': 'npm:canvg@2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<!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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>