gpt4 book ai didi

angular - 在 Angular 中扩展 Highcharts

转载 作者:行者123 更新时间:2023-12-02 02:40:45 26 4
gpt4 key购买 nike

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

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

Add Source to Highcharts Export 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 中的工作示例

最佳答案

您还可以将包装提取到一个独立函数,该函数将 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

关于angular - 在 Angular 中扩展 Highcharts ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63672410/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com