高图表导出按钮不显示

Question

I\xc2\xb4m 用 Angular 中的简单图表证明 highcharts。但导出按钮不显示。我在 html 页面中添加脚本：

\n\n

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

\n\n

并在图表中添加属性：

\n\n

export :true,\nnavigation: {\n  buttonOptions: {\n    align: \'right\',\n    verticalAlign: \'top\',\n    y: 0\n  }\n},\n

\n\n

但什么也没有。

\n\n

这是应用程序网址：

\n\n

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

\n

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