无法加载在角7个使用HighMaps 7地图图
问题描述 投票：0回答：1
我想，如在以下示例中所描述的加载地图图表，显示在标题和其它控制，但实际的地图是没有的。请让我知道我在这里失踪
Component.ts以下文件
displayMapChart(){this.mapChart = new MapChart({
chart: {
map: 'custom/world-robinson'
},
title: {
text: "Regions"
},
mapNavigation: {
enabled: true,
buttonOptions: {
alignTo: 'spacingBox'
}
},
colorAxis: {
min: 0
},
series: [
{
type: 'map',
name: 'Text here',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
allAreas: false,
data: [
['fo', 0],
['um', 1],
['us', 2],
['jp', 3],
['sc', 4],
['in', 5],
['fr', 6],
['fm', 7],
['cn', 8],
['pt', 9],
['sw', 10],
['sh', 11],
['br', 12],
['ki', 13],
['ph', 14],
['mx', 15],
['es', 16],
['bu', 17],
['mv', 18],
['sp', 19],
['gb', 20],
['gr', 21],
['as', 22],
['dk', 23],
['gl', 24],
['gu', 25],
['mp', 26],
['pr', 27],
['vi', 28],
['ca', 29],
['st', 30],
['cv', 31],
['dm', 32],
['nl', 33],
['jm', 34],
['ws', 35],
['om', 36],
['vc', 37],
['tr', 38],
['bd', 39],
['lc', 40],
['nr', 41],
['no', 42],
['kn', 43],
['bh', 44],
['to', 45],
['fi', 46],
['id', 47],
['mu', 48],
['se', 49],
['tt', 50],
['my', 51],
['pa', 52],
['pw', 53],
['tv', 54],
['mh', 55],
['cl', 56],
['th', 57],
['gd', 58],
['ee', 59],
['ag', 60],
['tw', 61],
['bb', 62],
['it', 63],
['mt', 64],
['vu', 65],
['sg', 66],
['cy', 67],
['lk', 68],
['km', 69],
['fj', 70],
['ru', 71],
['va', 72],
['sm', 73],
['kz', 74],
['az', 75],
['tj', 76],
['ls', 77],
['uz', 78],
['ma', 79],
['co', 80],
['tl', 81],
['tz', 82],
['ar', 83],
['sa', 84],
['pk', 85],
['ye', 86],
['ae', 87],
['ke', 88],
['pe', 89],
['do', 90],
['ht', 91],
['pg', 92],
['ao', 93],
['kh', 94],
['vn', 95],
['mz', 96],
['cr', 97],
['bj', 98],
['ng', 99],
['ir', 100],
['sv', 101],
['sl', 102],
['gw', 103],
['hr', 104],
['bz', 105],
['za', 106],
['cf', 107],
['sd', 108],
['cd', 109],
['kw', 110],
['de', 111],
['be', 112],
['ie', 113],
['kp', 114],
['kr', 115],
['gy', 116],
['hn', 117],
['mm', 118],
['ga', 119],
['gq', 120],
['ni', 121],
['lv', 122],
['ug', 123],
['mw', 124],
['am', 125],
['sx', 126],
['tm', 127],
['zm', 128],
['nc', 129],
['mr', 130],
['dz', 131],
['lt', 132],
['et', 133],
['er', 134],
['gh', 135],
['si', 136],
['gt', 137],
['ba', 138],
['jo', 139],
['sy', 140],
['mc', 141],
['al', 142],
['uy', 143],
['cnm', 144],
['mn', 145],
['rw', 146],
['so', 147],
['bo', 148],
['cm', 149],
['cg', 150],
['eh', 151],
['rs', 152],
['me', 153],
['tg', 154],
['la', 155],
['af', 156],
['ua', 157],
['sk', 158],
['jk', 159],
['bg', 160],
['qa', 161],
['li', 162],
['at', 163],
['sz', 164],
['hu', 165],
['ro', 166],
['ne', 167],
['lu', 168],
['ad', 169],
['ci', 170],
['lr', 171],
['bn', 172],
['iq', 173],
['ge', 174],
['gm', 175],
['ch', 176],
['td', 177],
['kv', 178],
['lb', 179],
['dj', 180],
['bi', 181],
['sr', 182],
['il', 183],
['ml', 184],
['sn', 185],
['gn', 186],
['zw', 187],
['pl', 188],
['mk', 189],
['py', 190],
['by', 191],
['cz', 192],
['bf', 193],
['na', 194],
['ly', 195],
['tn', 196],
['bt', 197],
['md', 198],
['ss', 199],
['bw', 200],
['bs', 201],
['nz', 202],
['cu', 203],
['ec', 204],
['au', 205],
['ve', 206],
['sb', 207],
['mg', 208],
['is', 209],
['eg', 210],
['kg', 211],
['np', 212]
]
}
]});}
Template.html
<mat-card class="md-elevation-z7">
<div style="height: 346px;" [chart]="mapChart"></div>
</mat-card>
1个回答
0
投票
投票
也许你不加载地图数据。从highcharts-angular官方包装，我建议你使用检查这样的描述：https://github.com/highcharts/highcharts-angular#to-load-a-map-for-highmaps。下面你会发现的角与highcharts地图在线例子（使用highcharts棱角包装）。
app.module.ts：
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent, ChartComponent],
imports: [BrowserModule, HighchartsChartModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
chart.component.ts：
import { Component, OnInit } from "@angular/core";
import * as Highcharts from 'highcharts';
import HC_map from 'highcharts/modules/map';
HC_map(Highcharts);
require("./worldmap")(Highcharts);
@Component({
selector: "app-chart",
templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "mapChart";
chartCallback;
chartOptions = {
chart: {
map: 'myMapName'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
alignTo: 'spacingBox'
}
},
colorAxis: {
min: 0
},
series: [{
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
allAreas: false,
data: [
['fo', 0],
['um', 1],
['us', 2],
['jp', 3],
['sc', 4],
['in', 5],
['fr', 6],
['fm', 7],
['cn', 8],
['pt', 9],
['sw', 10],
['sh', 11],
['br', 12],
['ki', 13],
['ph', 14],
['mx', 15],
['es', 16],
['bu', 17],
['mv', 18],
['sp', 19],
['gb', 20],
['gr', 21],
['as', 22],
['dk', 23],
['gl', 24],
['gu', 25],
['mp', 26],
['pr', 27],
['vi', 28],
['ca', 29],
['st', 30],
['cv', 31],
['dm', 32],
['nl', 33],
['jm', 34],
['ws', 35],
['om', 36],
['vc', 37],
['tr', 38],
['bd', 39],
['lc', 40],
['nr', 41],
['no', 42],
['kn', 43],
['bh', 44],
['to', 45],
['fi', 46],
['id', 47],
['mu', 48],
['se', 49],
['tt', 50],
['my', 51],
['pa', 52],
['pw', 53],
['tv', 54],
['mh', 55],
['cl', 56],
['th', 57],
['gd', 58],
['ee', 59],
['ag', 60],
['tw', 61],
['bb', 62],
['it', 63],
['mt', 64],
['vu', 65],
['sg', 66],
['cy', 67],
['lk', 68],
['km', 69],
['fj', 70],
['ru', 71],
['va', 72],
['sm', 73],
['kz', 74],
['az', 75],
['tj', 76],
['ls', 77],
['uz', 78],
['ma', 79],
['co', 80],
['tl', 81],
['tz', 82],
['ar', 83],
['sa', 84],
['pk', 85],
['ye', 86],
['ae', 87],
['ke', 88],
['pe', 89],
['do', 90],
['ht', 91],
['pg', 92],
['ao', 93],
['kh', 94],
['vn', 95],
['mz', 96],
['cr', 97],
['bj', 98],
['ng', 99],
['ir', 100],
['sv', 101],
['sl', 102],
['gw', 103],
['hr', 104],
['bz', 105],
['za', 106],
['cf', 107],
['sd', 108],
['cd', 109],
['kw', 110],
['de', 111],
['be', 112],
['ie', 113],
['kp', 114],
['kr', 115],
['gy', 116],
['hn', 117],
['mm', 118],
['ga', 119],
['gq', 120],
['ni', 121],
['lv', 122],
['ug', 123],
['mw', 124],
['am', 125],
['sx', 126],
['tm', 127],
['zm', 128],
['nc', 129],
['mr', 130],
['dz', 131],
['lt', 132],
['et', 133],
['er', 134],
['gh', 135],
['si', 136],
['gt', 137],
['ba', 138],
['jo', 139],
['sy', 140],
['mc', 141],
['al', 142],
['uy', 143],
['cnm', 144],
['mn', 145],
['rw', 146],
['so', 147],
['bo', 148],
['cm', 149],
['cg', 150],
['eh', 151],
['rs', 152],
['me', 153],
['tg', 154],
['la', 155],
['af', 156],
['ua', 157],
['sk', 158],
['jk', 159],
['bg', 160],
['qa', 161],
['li', 162],
['at', 163],
['sz', 164],
['hu', 165],
['ro', 166],
['ne', 167],
['lu', 168],
['ad', 169],
['ci', 170],
['lr', 171],
['bn', 172],
['iq', 173],
['ge', 174],
['gm', 175],
['ch', 176],
['td', 177],
['kv', 178],
['lb', 179],
['dj', 180],
['bi', 181],
['sr', 182],
['il', 183],
['ml', 184],
['sn', 185],
['gn', 186],
['zw', 187],
['pl', 188],
['mk', 189],
['py', 190],
['by', 191],
['cz', 192],
['bf', 193],
['na', 194],
['ly', 195],
['tn', 196],
['bt', 197],
['md', 198],
['ss', 199],
['bw', 200],
['bs', 201],
['nz', 202],
['cu', 203],
['ec', 204],
['au', 205],
['ve', 206],
['sb', 207],
['mg', 208],
['is', 209],
['eg', 210],
['kg', 211],
['np', 212]
]
}]
};
constructor() {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
};
}
ngOnInit() {}
update_chart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15]
}
];
self.updateFromInput = true;
}, 2000);
}
}
chart.component.html：
<div class="boxChart__container">
<div>
<highcharts-chart
id="container"
[Highcharts]="Highcharts"
[constructorType]="chartConstructor"
[options]="chartOptions"
[callbackFunction]="chartCallback"
[(update)]=updateFromInput
[oneToOne]="true"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
</div>
</div>
演示：
最新问题
- pickle 中的 ModuleNotFoundError
- pysnmp.smi.error.MibNotFoundError：没有在 <pysnmp.smi.builder.MibBuilder object at 0x0418A110>
- Firebase 9 deleteDoc 删除文档不起作用 - 未捕获的类型错误：无法读取 null 的属性（读取“名称”）
- PySNMP 获取变量超时
- 测试 SNMP 代理的 URL
- 对格式为 d/m/Y 的日期数组进行排序
- 如何将带有嵌套表格的表格的html转换为docx？
- 使用PySNMP监控网络设备
- 如何使用 docker-compose 在 docker/container 之外公开 ZMQ 容器端口？
- 如何检查用户是否已存在于 Supabase 中？
- 如何使用 mibdump.py 为企业 MIB 生成 .py 文件
- 如何将图像转换并模糊为以下输出？
- 如何修改Cognito Userpool的自定义属性？
- AWS Lambda 与 API Gateway 502 集成错误
- 从外部源（文件或文件夹内容）创建 Inno Setup 组件/类型的动态列表
- 反应本机中的样式抽屉菜单切换按钮
- 智能电视应用SDK并支持自动启动和自动更新
- 字符串列表的 ASP.NET Core JsonResult 生成带单引号而不是双引号的 JSON
- Shopware6 SW6 中 DAL 索引的作用是什么？
- 如何获取 Elementor 自定义小部件的简码
© www.soinside.com 2019 - 2024. All rights reserved.