Question

我需要帮助在angular4 app中获取我的高图。我使用npm安装了highcharts。

我在我的app.component.ts中包含了高级图表，因为我有一些错误以这种方式解决（可能是错误的方式）：

const Highcharts = require('highcharts');
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/data')(Highcharts);
require('highcharts/js/modules/world')(Highcharts);

之后我可以使用Highcharts创建图表而没有任何问题，但问题是，当我想使用Highcharts.js + map.js创建地图时，我似乎无法从中获取'world.js'包含或导入地图集合还是我遗漏了什么？我尝试以require('.../world.js')(Highcharts)以上的方式获取文件，我尝试在index.html中使用"<script src="">标记，并使用highcharts中的链接作为源，这两种方式我都得到了错误（链接提供了下来）。我还尝试将'world.js'中的数据直接复制到'mapData: Highcharts.maps['custom/world'] = {...},'下的图表选项中，它就是这样做的。那么我该怎么做才能使用它而不是复制粘贴数据呢？

Error screenshot

Answer 1

加载Highmaps地图

地图是JSON类型文件，包含创建图表时使用的mapData代码。以Javascript格式从official Highcharts map collection下载地图或使用custom map并将其添加到您的应用中。编辑地图文件，以便通过添加到下面的文件代码的开头和结尾来像模块一样加载：

ClassCastException

如果使用GeoJSON地图文件格式，您应该添加上面的代码，另外，在添加的开头和地图文件数据之间添加以下代码：

(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function (Highcharts) {

...
/* map file data */
...

}));

Highcharts.maps["myMapName"] =是您的地图名称，将在创建图表时使用。接下来，您将加载本地.js文件，因此您应该在应用"myMapName"中添加tsconfig.json：

allowJs: true

地图已准备好导入您的应用。

...
"compilerOptions": {
    "allowJs": true,
    ...

import * as Highcharts from 'highcharts/highmaps'; import * as HC_myMap from './relative-path-to-the-map-file/map-file-name'; HC_myMap(Highcharts);应该是相对的（对于导入地图的模块）路径到地图文件，relative-path-to-the-map-file应该是地图文件的名称。

Angular4 with highcharts不能使用world.js

1 个答案: