聚合物highmaps：不能读取属性mapChart undefined

-1

我想提供一个使用jsfiddle http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/ highmap聚合物的包装但它是抛出一个错误不能读取属性mapChart的undefined，有人请提供一个工作jsfiddle使用聚合物的highmap？聚合物highmaps：不能读取属性mapChart undefined

<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>

来源

2017-09-02 shashank

您所提供的链接是工作的罚款。 – Ofisora

@Ofisora是的，但聚合物的高分辨率包装不起作用，我发布了代码，这是不工作的jsfiddle代码作为参考 – shashank

我以为jsfiddle是你的聚合物代码。无论如何，检查我的答案。 – Ofisora

您初始化图表的代码是错误的。阅读文档here。

更改代码

$(this.$.container).Highcharts.mapChart('container', {

到

Highcharts.mapChart(this.$.container, {

或者，

$(this.$.container).highcharts('Map', {

那么它会工作。

Working Demo in Polymer

来源

2017-09-03 05:15:18 Ofisora

我应该先通过文档，我复制小提琴，感谢它的工作 – shashank

聚合物highmaps：不能读取属性mapChart undefined

回答

相关问题