如何在 angular 中添加 3d Highcharts - Countour 插件 8. 尝试了多种方法但仍然出现错误

Question

我想在我们的 angular 项目中包含特定于 highcharts 的轮廓插件。由于没有为此找到 npm 库。我尝试将其作为包装器，但仍然出现错误，因为找不到模块。有人可以帮我吗

Answer 1

您可以在此处找到有关如何添加和加载自定义 plugin/wrapper 的示例：https://stackblitz.com/edit/highcharts-angular-custom-plugin。

    // customPlugin.ts
    export default function(Highcharts) {
      const H = Highcharts;
      H.wrap(H.Chart.prototype, "showNoData", function(p, str) {
        ...
      });
    }

    // xxx.component.ts
    import customPlugin from "./customPlugin";
    customPlugin(Highcharts)

Highcharts-angular 文档：https://github.com/highcharts/highcharts-angular#to-load-a-plugin.

如果上述 none 解决方案对您有用，请在在线编辑器中重现该问题，以便我检查哪些不起作用以及哪些可以解决。另外，您使用的是官方 highcharts-angular 包装器吗？

Answer 2

我尝试注入包含轮廓代码的插件 'customPlugin.ts'： https://github.com/paulo-raca/highcharts-contour/blob/master/highcharts-contour.js

import * as Highcharts from 'highcharts/highcharts';
import highcharts3D from 'highcharts/highcharts-3d';
import Heatmap from 'highcharts/module/heatmap';
import customPlugin from "./customPlugin";

highcharts3D(Highcharts);
customPlugin(Highcharts);

但是出现运行时错误： " The requested series type does not exist.This 将 chart.type 或 series.type 设置为未在 HighCharts 中定义的系列时会发生错误。一个典型的原因可能是未包含定义系列类型的模块或扩展。例如，为了创建一个 arearange 系列，必须加载 highcharts-more.js 文件。"

我看到 contourPlugin 中需要“Heatmap”seriesType，所以尝试了以下代码：

highcharts3D(Highcharts);
Heatmap(Highcharts);
customPlugin(Highcharts);

仍然出现同样的错误。如果您有任何建议，请提供。

如何在 angular 中添加 3d Highcharts - Countour 插件 8. 尝试了多种方法但仍然出现错误

How to add 3d Highcharts - Countour plugin in angular 8. Tried Multiple ways but still getting error

highcharts

angular-chart