如何在highcharts-angular中添加图表上下文菜单? [英] How can we add chart context menu in highcharts-angular?

问题描述

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

Can someone please help me in this, actually in my highcharts-angular application need to be display chart context menu as show in below image.

我已经经历过 https://www.highcharts.com/demo/pie -basic 示例，但是javascript& jQuery.但是在这里，我需要在highcharts-angle中使用相同的功能.请在此处找到我的示例代码 https://stackblitz.com/edit/angular-s6h17i & ;请分享您的建议.提前致谢.

And I have gone through this https://www.highcharts.com/demo/pie-basic example but this whole code in javascript & Jquery. But here I need same functionality in highcharts-angular. Please find my sample code here https://stackblitz.com/edit/angular-s6h17i & please share your suggestions. Thanks in advance.

推荐答案

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

Highcharts context menu requires to import and initialize exporting and export-data modules:

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

这篇关于如何在highcharts-angular中添加图表上下文菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！