highcharts - 调用上下文菜单功能

Question

我正在使用 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>

可能吗？

Answer 1

我们可以使用外部 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);