如何正确管理 Angular 中的导入？

Question

我正在尝试将数据模块导入 Angular 以读取高图表中的 CSV，如下所示：

import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsData from "highcharts/modules/data";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
HighchartsData(Highcharts);

但是，执行此操作时出现以下错误：

无法调用类型缺少调用签名的表达式。类型 '类型 导入（“角度-highcharts/node_modules/highcharts/highcharts-more”）' 没有兼容的调用签名

我尝试的其他事情是像这样进行导入：

import HC_data from 'highcharts/modules/data';
let Boost = require('highcharts/modules/boost');
let noData = require('highcharts/modules/no-data-to-display');
let More = require('highcharts/highcharts-more');
Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);
HC_data(Highcharts);

在这种情况下，我没有收到错误消息，但高图表只会显示：

没有可显示的数据

每当我在图表设置中尝试这样的事情时：

data: {
   csv: csvFile
},

我做错了什么？如何正确导入数据模块？或者我怎样才能在 highcharts 中正确显示 csv 数据？

Answer 1

试试下面的方法。

import {HC_data} from 'highcharts/modules/data';
import {Boost} from 'highcharts/modules/boost';
import {noData} from 'highcharts/modules/no-data-to-display';
import  {More} from 'highcharts/highcharts-more';
Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);
HC_data(Highcharts);

试试这个代码。