调用上下文菜单功能
call to context menu function
我正在使用 angular-5,angular2-highcharts 版本 0.5.5 和 highcharts 版本 6.0.7。
我想在我的 html 中添加一个模拟“上下文菜单”按钮的按钮,而不是在图表中。它不能像往常一样使用导出选项。
这是我的代码:
options = {
exporting: {
enabled: false,
csv: {itemDelimiter: ';'}
}
};
private showContext() {
//this.chart.???? -> show context menu
}
<div>
<a (click)="showContext()">
<mat-icon>file_download</mat-icon>
</a>
</div>
<chart [options]="options"
</chart>
可能吗?
我们可以使用带有
的外部 html 按钮导出图表
chart.exportChart({
type: 'image/png',
filename: 'theimage'
});
plunker 演示
完整代码
import { platformBrowserDynamic } from '@angular/platform-browser-
dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
@Component({
selector: 'my-app',
styles: [`
chart {
display: block;
}
`],
template: `<button (click)="exportCharts()" >Export</button><chart [options]="options" (load)="saveInstance($event.context)"></chart>`
})
class AppComponent {
constructor() {
this.options = {
chart: {
type: 'column',
margin: 75,
},
plotOptions: {
column: {
depth: 25
}
},
exporting: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
}
options: Object;
chart: any;
saveInstance(chartInstance): void {
this.chart = chartInstance;
}
exportCharts(){
this.chart.exportChart({
type: 'image/png',
filename: 'theimage'
});
}
}
@NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(
require('highcharts'),
require('highcharts/modules/exporting'),
)
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
我正在使用 angular-5,angular2-highcharts 版本 0.5.5 和 highcharts 版本 6.0.7。
我想在我的 html 中添加一个模拟“上下文菜单”按钮的按钮,而不是在图表中。它不能像往常一样使用导出选项。
这是我的代码:
options = {
exporting: {
enabled: false,
csv: {itemDelimiter: ';'}
}
};
private showContext() {
//this.chart.???? -> show context menu
}
<div>
<a (click)="showContext()">
<mat-icon>file_download</mat-icon>
</a>
</div>
<chart [options]="options"
</chart>
可能吗?
我们可以使用带有
的外部 html 按钮导出图表chart.exportChart({
type: 'image/png',
filename: 'theimage'
});
plunker 演示
完整代码
import { platformBrowserDynamic } from '@angular/platform-browser-
dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
@Component({
selector: 'my-app',
styles: [`
chart {
display: block;
}
`],
template: `<button (click)="exportCharts()" >Export</button><chart [options]="options" (load)="saveInstance($event.context)"></chart>`
})
class AppComponent {
constructor() {
this.options = {
chart: {
type: 'column',
margin: 75,
},
plotOptions: {
column: {
depth: 25
}
},
exporting: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
}
options: Object;
chart: any;
saveInstance(chartInstance): void {
this.chart = chartInstance;
}
exportCharts(){
this.chart.exportChart({
type: 'image/png',
filename: 'theimage'
});
}
}
@NgModule({
imports: [
BrowserModule,
ChartModule.forRoot(
require('highcharts'),
require('highcharts/modules/exporting'),
)
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);