highcharts - Highcharts 导出按钮不显示

Question

我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>  
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>  
<script src="https://code.highcharts.com/modules/export-data.js"></script>

并在图表中添加属性:

export :true,
navigation: {
  buttonOptions: {
    align: 'right',
    verticalAlign: 'top',
    y: 0
  }
},

但什么都没有。

这是您的应用程序网址:

https://stackblitz.com/edit/angular-hkncp8

Answer 1

你的调用有错别字(exporting 而不是 export)，你还应该设置菜单项:

exporting: {
      buttons: {
        contextButton: {
          menuItems: [
            'viewFullscreen', 'separator', 'downloadPNG',
            'downloadSVG', 'downloadPDF', 'separator', 'downloadXLS'
          ]
        },
      },
      enabled: true,
    },
navigation: {
  buttonOptions: {
    align: 'right',
    verticalAlign: 'top',
    y: 0
  }
},

并且您需要将 exporting modules 导入到同一个文件中:

import { Component, OnInit, OnDestroy } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HttpClient } from '@angular/common/http';
import { interval, Subscription } from 'rxjs';

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);
require('highcharts/modules/annotations')(Highcharts);

declare var require: any;
(...)

现场演示:https://stackblitz.com/edit/angular-1ylkg8

API 引用:https://api.highcharts.com/highcharts/exporting