带有Angular的Highcharts/Highmaps-无法运行演示 [英] Highcharts / Highmaps with Angular - Cannot run demo
问题描述
我正在发现Highcharts/Highmaps，现在，我想使用 Angular 6 在我的机器上重现一些演示示例，但是我无法使其正常工作.
I'm discovering Highcharts / Highmaps and for now, I would like to reproduce some demo examples on my machine using Angular 6, but I can't make it work.
官方JS示例在此处: https://www.highcharts.com/maps/demo/map-drilldown (您可以通过单击在CodePen中编辑"来查看代码)
The official JS example is here : https://www.highcharts.com/maps/demo/map-drilldown (you can see the code by clicking "Edit in CodePen")
我试图适应这样的示例:
I've tried to adapt the example like this :
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)的所有调用.
But no luck so far. Here I get the error geojson is undefined and my editor (Visual Studio Code) underlines all my calls to 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内部导入各种模块(基于一些教程)，但是没有任何改进...
As you can see, I've tried importing various modules from inside Highcharts (based on several tutorials), but with no improvement...
我对Highcharts完全迷失了.显然，在我的设置和/或使用此框架时出了点问题，但是文档根本没有帮助，我找不到任何完整，详细的Angular教程.
I feel completely lost about Highcharts. Obviously something is wrong in my setup and/or in my use of this framework, but the documentation is not helpful at all and I couldn't find any complete, detailed Angular tutorial.
至少有人可以帮助我在Angular应用中运行此官方示例吗?
Can somebody help me at least to run this official example in an Angular app ?
UPDATE : Thanks to @daniel_s, I'm now using the official wrapper highcharts-angular and got rid of the editor errors.
I ran npm install highcharts-angular --save then npm install highcharts --save in the console in a new project.
您可以在此处查看项目: https://codesandbox.io/s/38o5n9qor1 (我在沙箱中添加了highcharts-angular，highcharts和highcharts-map作为依赖项) 在控制台中，出现错误:
You can see the project here : https://codesandbox.io/s/38o5n9qor1 (I added highcharts-angular, highcharts and highcharts-map as dependencies in the sandbox) In the console, we get the error :
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
您可以检查并帮助我更正我的代码吗?
Can you check and help me correct my code ?
推荐答案
它不起作用，因为您根本没有在项目中导入任何地图.不幸的是，没有所有地图的npm包，但是您可以手动创建带有所需地图的文件，并将文件直接导入到项目中.以下是如何将地图添加到项目中的示例: https://codesandbox.io/s/vm58jk5005
It's not working because you don't import any map in your project at all. Unfortunately, there is no npm package with all maps, but you can manually create a file with maps which you need, and import the files directly to your project. Here is the example of how to add the map to your project: https://codesandbox.io/s/vm58jk5005
最诚挚的问候！
这篇关于带有Angular的Highcharts/Highmaps-无法运行演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
