我们如何在 highcharts-angular 中添加图表上下文菜单？答案

【问题标题】：How can we add chart context menu in highcharts-angular?我们如何在 highcharts-angular 中添加图表上下文菜单？
【发布时间】：2019-01-28 14:30:49
【问题描述】：

有人可以帮助我吗，实际上在我的 highcharts-angular 应用程序中需要显示图表上下文菜单，如下图所示。

我已经完成了这个https://www.highcharts.com/demo/pie-basic 示例，但整个代码都是用javascript 和Jquery 编写的。但是在这里我需要在 highcharts-angular 中具有相同的功能。请在https://stackblitz.com/edit/angular-s6h17i 找到我的示例代码，请分享您的建议。提前致谢。

【问题讨论】：

谁能帮我解决这个问题？
问题是如何在列表中制作下拉菜单或所有这些功能？
据我了解，Highchart 为您提供了一个使用图表的 API。下拉菜单不是 highchart 库的职责。您需要自己实现它或使用一些第三方模块来实现它
是的 Danil Gudz，如上图所示，我需要为用户提供图表上下文菜单以查看不同格式的数据。看起来我需要所有功能 Danil Gudz。必须添加下拉列表及其功能。
@DanilGudz，如果可能，请提供任何示例代码 sn-ps？我一直在尝试一些方法，但还没有成功:(。

标签： angular highcharts

【解决方案1】：

Highcharts 上下文菜单需要导入和初始化 exporting 和 export-data 模块：

import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsExportData from "highcharts/modules/export-data";

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);

您的 app.component.ts：

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsExportData from "highcharts/modules/export-data";

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: "pie"
    },
    title: {
      text: "Browser market shares in January, 2018"
    },
    tooltip: {
      pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
          enabled: true,
          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
        },
        showInLegend: true
      }
    },
    credits: {
      enabled: false
    },
    series: [
      {
        name: "Brands",
        colorByPoint: true,
        data: [
          {
            name: "Chrome",
            y: 61.41,
            sliced: true,
            selected: true
          },
          {
            name: "Internet Explorer",
            y: 11.84
          },
          {
            name: "Firefox",
            y: 10.85
          },
          {
            name: "Edge",
            y: 4.67
          },
          {
            name: "Safari",
            y: 4.18
          },
          {
            name: "Sogou Explorer",
            y: 1.64
          },
          {
            name: "Opera",
            y: 1.6
          },
          {
            name: "QQ",
            y: 1.2
          },
          {
            name: "Other",
            y: 2.61
          }
        ]
      }
    ]
  };
  ngOnInit() {}
}

演示： https://codesandbox.io/s/2z2y2n07w0

【讨论】：

按照您的建议尝试时，我看到此错误[ts] Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("d:/Angular/Angular6WithHighcharts/node_modules/highcharts/modules/exporting")' has no compatible call signatures. [2349] 有什么想法吗？
看起来有些版本问题？
这个错误是你本地环境还是在线demo出现的？
它在我的本地环境中@Wojciech Chmiel，但几乎没有改变它的工作方式就像一个魅力。谢谢。
当然@Wojciech Chmiel，由于我上面发布的错误，我已经进行了一些额外的代码更改，我们可以在这里看到完整的代码https://stackblitz.com/edit/angular-s6h17i?file=src%2Fapp%2Fapp.component.html。

【解决方案2】：

根据this documentation in npmjs.com，应该将这些行添加到适当的组件中，以便出现下载上下文按钮：

import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';

HC_exporting(Highcharts);

【讨论】：