<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: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.1.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'stackblur-canvas': 'npm:stackblur-canvas@2.4.0/dist/stackblur.min.js',
'rgbcolor': 'npm:rgbcolor@1.0.1/index.js',
'canvg': 'npm:canvg@2.0.0/dist/browser/canvg.min.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18',
'devextreme-angular': 'npm:devextreme-angular@20.2.5',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
});
<!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/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://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.10.2/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>