Angular 在图形中使用api函数

你好

我使用highcharts.com库生成图形。 当用户单击某个点时，我希望在应用程序上打开一个iframe。 api上的软件（open_link）中有一个函数，我想使用这个函数

我的问题是: 如何使用api中提供的函数

import { Component, Input, OnInit, AfterViewInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { ProductsService } from 'src/app/services/products.service';

@Component({
  selector: 'app-graphic',
  templateUrl: './graphic.component.html',
  styleUrls: ['./graphic.component.scss']
})
export class GraphicComponent implements OnInit, AfterViewInit {

  @Input() data = [];
  @Input() titleGraphic = '';
  @Input() idContainer = 0;

  chartOptions = {};

  constructor(private productService: ProductsService) { }

  setChart(graphicData) {
    this.chartOptions = {
      chart: {
        renderTo: 'container' + this.idContainer,
        type: 'line',
        height: '200px'
      },
      title: false,
      credits: {
        enabled: false,
      },
      legend: {
        enabled: false,
      },
      plotOptions: {
        series: {
            marker: {
                enabled: true
            },
            cursor: 'pointer',
            events: {
              click: function open_link()
              {
                
              }
            }
        }
      },
      xAxis: {
        tickInterval: 4 * 7 * 24 * 3600 * 1000,
        tickWidth: 0,
        gridLineWidth: 1,
        title: {
          text: null
        },
        type: 'datetime',
        dateTimeLabelFormats: {
          month: '%B',
        }
      },
      yAxis: {
        gridLineWidth: 0,
        title: {
          text: null
        }
      },
      series: [{
        name: 'Nombre de bien(s)',
        data: this.productService.getSortedProduct(graphicData)['productsInterval']
      }]
    };
  }

---

Merci

您可以引入布尔标志来控制iframe的可见性。试试下面的方法

打字稿

showIframe=false；
打印选项：{
系列：{
标记：{enabled:true}，
光标：“指针”，
活动：{
单击：this.openLink.bind（this）//{
...
this.showIframe=true；
},
错误=>{}
);
}

模板

我无法编辑帖子，这里是highcharts API的链接，可能很有用：open_link函数是API的函数，而不是前端。如果需要，我的图表的每个点对应一个产品列表。每个点上都有一个id列表。当我单击某个点时，我想显示产品列表s、 答案中的

getData（）

函数包含对API的实际HTTP调用：

myApi.open\u link（）

。这就是为什么前端中的函数被称为

openLink（）

，而不是API函数

open\u link（）

。