在 Angular 中扩展高图表

Question

我在 Angular 项目中使用 highcharts，需要对导出 CSV 功能进行一些操作。

我在 stackoverflow 中找到了一个线程，它似乎解释了我需要做什么：

将源添加到 Highcharts 导出 CSV

但不幸的是它是使用纯 JavaScript 实现的，我无法找出如何在 Angular 组件内扩展 Highcharts。

这就是我想知道如何在 Angular 中实现：

(function (H) {
    H.wrap(H.Chart.prototype, 'getCSV', function (proceed, useLocalDecimalPoint) {
        // Run the original proceed method
        result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        result += '\n"My source 1","My source 2","My source 3"';
        return result;
    });
}(Highcharts));

这是JSFiddle中的工作示例

Answer 1

您还可以将包装提取到一个独立函数，该函数将 Highcharts 作为其参数。然后您需要做的就是导入并使用Highcharts.

//customWrap.ts
export default function(Highcharts) {
  const H = Highcharts;
  H.wrap(H.Chart.prototype, "getCSV", function(proceed, useLocalDecimalPoint) {
    // Run the original proceed method
    let result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    result += '\n"My source 1","My source 2","My source 3"';
    return result;
  });
}

//app.component.ts
import { Component } from "@angular/core";
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting'
import HC_exportData from 'highcharts/modules/export-data';
import customWrap from './customWrap';

HC_exporting(Highcharts);
HC_exportData(Highcharts);
customWrap(Highcharts);
...

现场演示： https://stackblitz.com/edit/highcharts-angular-basic-line-1jommb ?file=src/app/app.component.ts