我发现Highcharts / Highmaps现在来看，我想用角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代码）强调我对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。 显然，什么是错在我的设置和/或在我使用这个框架，但文档是不是在所有有益的，我找不到任何完整的，详细的角教程。
有人可以帮我至少要在一个角度应用程序运行这个官方的例子吗？
更新：感谢@daniel_s，我现在使用的是官方的包装highcharts棱角和摆脱了编辑错误。 我跑npm install highcharts-angular --save然后npm install highcharts --save在一个新的项目控制台。
你可以在这里看到的项目： https://codesandbox.io/s/38o5n9qor1 （我加highcharts棱角，highcharts和highcharts地图作为沙箱依赖）在控制台中，我们得到如下错误：
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
你可以检查并帮我纠正我的代码？
