【发布时间】：2019-01-13 05:03:38
【问题描述】：
我正在发现 Highcharts / Highmaps，现在，我想在我的机器上使用 Angular 6 重现一些演示示例，但我无法让它工作。
官方 JS 示例在这里：https://www.highcharts.com/maps/demo/map-drilldown（您可以点击“在 CodePen 中编辑”查看代码）
我试图像这样调整示例：
import { Component, OnInit } from '@angular/core';
import { Highcharts, MapChart } from 'angular-highcharts';
require('highcharts/modules/map')(Highcharts);
@Component({
selector: 'app-demo-map-drilldown',
templateUrl: './demo-map-drilldown.component.html',
styleUrls: ['./demo-map-drilldown.component.css']
})
export class DemoMapDrilldownComponent implements OnInit {
private chart: MapChart;
constructor(private httpClient: HttpClient) { }
ngOnInit() {
let data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
let separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');
// Set drilldown pointers
data.forEach((element, i) => {
element.drilldown = element.properties['hc-key'];
element.value = i; // Non-random bogus data
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
let chart = this;
let mapKey = 'countries/us/' + e.point.drilldown + '-all';
// Handle error, the timeout is cleared on success
let fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
//data = Highcharts.geojson(Highcharts.maps[mapKey]);
data = Highcharts.maps[mapKey];
// Set a non-random bogus value
data.forEach((element, i) => {
element.value = i; // Non-random bogus data
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: '' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: '',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [{
data: data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}, {
type: 'mapline',
data: separators,
color: 'silver',
enableMouseTracking: false,
animation: {
duration: 500
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
}
}
但到目前为止还没有运气。在这里，我收到错误geojson is undefined，我的编辑器（Visual Studio Code）强调了我对 Highcharts 的所有调用（.geojson、.maps、.mapChart）。
我的app.module.ts 文件如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as highstock from 'highcharts/modules/stock.src';
import * as highmaps from 'highcharts/modules/map.src';
import * as drilldown from 'highcharts/modules/drilldown.src';
import * as data from 'highcharts/modules/data.src';
import * as exportdata from 'highcharts/modules/export-data.src';
import * as offline from 'highcharts/modules/offline-exporting.src';
import { AppComponent } from './app.component';
import { DemoMapDrilldownComponent } from './demo-map-drilldown/demo-map-drilldown.component';
@NgModule({
declarations: [
AppComponent,
DemoMapDrilldownComponent,
],
imports: [
BrowserModule,
ChartModule,
],
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: () => [more, exporting, highstock, highmaps, drilldown, data, exportdata, offline]
}, // add as factory to your providers
],
bootstrap: [AppComponent]
})
export class AppModule { }
如您所见，我尝试从 Highcharts 中导入各种模块（基于几个教程），但没有任何改进...
我对 Highcharts 完全迷失了方向。显然，我的设置和/或我使用这个框架时出了点问题，但文档根本没有帮助，我找不到任何完整、详细的 Angular 教程。
至少有人可以帮我在 Angular 应用程序中运行这个官方示例吗？
更新：感谢@daniel_s，我现在使用官方包装器highcharts-angular 并摆脱了编辑器错误。
我在一个新项目的控制台中运行了npm install highcharts-angular --save 然后npm install highcharts --save。
你可以在这里看到这个项目：https://codesandbox.io/s/38o5n9qor1 （我在沙箱中添加了 highcharts-angular、highcharts 和 highcharts-map 作为依赖项） 在控制台中，我们得到了错误：
ERROR TypeError: "a is undefined"
geojson https://38o5n9qor1.codesandbox.io/node_modules/highcharts/highmaps.js:435:407
ngAfterViewInit https://38o5n9qor1.codesandbox.io/src/app/official-example/official-example.component.ts:18:20
您能检查并帮助我更正我的代码吗？
【问题讨论】：
-
您是否尝试过使用我们的官方 Highcharts Angular 包装器？这是 npm 包链接：npmjs.com/package/highcharts-angular。我怀疑你的实现有点错误，但我只是猜测。您能否尝试在 StackBlitz 或 CodeSandbox 等代码沙箱中准备您的应用程序示例？如果是，请提供给我。
-
@daniel_s 我觉得很傻。我一直在使用npmjs.com/package/angular-highcharts（这是我找到的第一个谷歌结果）而不是 highcharts-angular，但没有怀疑它不是官方包装器。使用 highcharts-angular，编辑器错误消失了！非常非常感谢你 ！所以现在我的问题是将示例重写为 Angular 组件。请查看我的编辑。
标签： angular highcharts