代码之家 › 专栏 › 技术社区 › i1zivkovic

具有高图表的Angular4无法使用world。js公司

highmaps highcharts angular javascript

3

i1zivkovic · 技术社区 · 7 年前

我需要帮助在angular4应用程序中获取highmap。我使用npm安装了highcharts。

我在应用程序中加入了highcharts。组成部分T喜欢这样,因为我用这种方法解决了一些错误(可能是错误的方法):

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+地图。我似乎无法了解这个世界。包含或导入了地图收藏中的js,还是我遗漏了什么?我试着用上面同样的方法获取文件 require('.../world.js')(Highcharts) 我试着用 "<script src=""> 索引中的标记。html和使用highcharts中的链接作为源,这两种方式都会导致错误(链接向下提供)。我还尝试从“世界”复制数据。js’直接进入图表选项 'mapData: Highcharts.maps['custom/world'] = {...},'

Error screenshot

1 回复 | 直到 4 年前

1

2

Kacper Madej 7 年前

为Highmaps加载地图

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

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

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

}));

如果使用GeoJSON地图文件格式,则应添加上述代码,此外,在添加的开始和地图文件数据之间,还应添加以下代码:

Highcharts.maps["myMapName"] =

哪里 "myMapName" 是创建图表时将使用的地图名称。接下来,您将加载一个本地。js文件,所以您应该添加 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 应该是映射文件的相对路径(对于导入映射的模块),并且 map-file-name 应该是映射文件的名称。