Polymer with highmaps:cannot read 属性 未定义的 mapChart
Polymer with highmaps:cannot read property mapChart of undefined
我正在尝试使用 jsfiddle 在 highmap 上提供聚合物包装 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/
但它抛出一个错误无法读取 属性 未定义的 mapChart,有人可以提供一个使用 polymer 的 highmap 的工作 jsfiddle 吗?
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js">
</script>
<script src="https://code.highcharts.com/maps/modules/exporting.js">
</script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js">
</script>
<dom-module id="high-map">
<template>
<div id="container"></div>
<style>
#container {
height: 100x;
min-width: 310px;
max-width: 700px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
</style>
</template>
<script>
Polymer({
is: "high-map",
attached: function () {
$(this.$.container).Highcharts.mapChart('container', {
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: Highcharts.maps['countries/gb/gb-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'),
color: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275
}, {
name: 'Birmingham',
lat: 52.483056,
lon: -1.893611
}, {
name: 'Leeds',
lat: 53.799722,
lon: -1.549167
}, {
name: 'Glasgow',
lat: 55.858,
lon: -4.259
}, {
name: 'Sheffield',
lat: 53.383611,
lon: -1.466944
}, {
name: 'Liverpool',
lat: 53.4,
lon: -3
}, {
name: 'Bristol',
lat: 51.45,
lon: -2.583333
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93
}, {
name: 'Lerwick',
lat: 60.155,
lon: -1.145,
dataLabels: {
align: 'left',
x: 5,
verticalAlign: 'middle'
}
}]
}]
});
}
});
</script>
</dom-module>
您的图表初始化代码有误。阅读文档 here.
更改您的代码
$(this.$.container).Highcharts.mapChart('container', {
到
Highcharts.mapChart(this.$.container, {
或者,
$(this.$.container).highcharts('Map', {
那就可以了。
我正在尝试使用 jsfiddle 在 highmap 上提供聚合物包装 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/ 但它抛出一个错误无法读取 属性 未定义的 mapChart,有人可以提供一个使用 polymer 的 highmap 的工作 jsfiddle 吗?
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js">
</script>
<script src="https://code.highcharts.com/maps/modules/exporting.js">
</script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js">
</script>
<dom-module id="high-map">
<template>
<div id="container"></div>
<style>
#container {
height: 100x;
min-width: 310px;
max-width: 700px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
</style>
</template>
<script>
Polymer({
is: "high-map",
attached: function () {
$(this.$.container).Highcharts.mapChart('container', {
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: Highcharts.maps['countries/gb/gb-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'),
color: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275
}, {
name: 'Birmingham',
lat: 52.483056,
lon: -1.893611
}, {
name: 'Leeds',
lat: 53.799722,
lon: -1.549167
}, {
name: 'Glasgow',
lat: 55.858,
lon: -4.259
}, {
name: 'Sheffield',
lat: 53.383611,
lon: -1.466944
}, {
name: 'Liverpool',
lat: 53.4,
lon: -3
}, {
name: 'Bristol',
lat: 51.45,
lon: -2.583333
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93
}, {
name: 'Lerwick',
lat: 60.155,
lon: -1.145,
dataLabels: {
align: 'left',
x: 5,
verticalAlign: 'middle'
}
}]
}]
});
}
});
</script>
</dom-module>
您的图表初始化代码有误。阅读文档 here.
更改您的代码
$(this.$.container).Highcharts.mapChart('container', {
到
Highcharts.mapChart(this.$.container, {
或者,
$(this.$.container).highcharts('Map', {
那就可以了。