ハイマップを持つポリマー：プロパティを読み取ることができません

Question

私はハイマップ上でjsfiddleを使用してポリマーのラッパーを提供しようとしていますhttp://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/ しかし、それはエラーをスローしています未定義のプロパティmapChartを読み取ることができない、誰かが作業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> 

Answer 1

グラフを初期化するためのコードが間違っています。文書hereを読んでください。

は、それが動作します

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

Highcharts.mapChart(this.$.container, {

あるいは、

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

にあなたのコードに変更し

。

Working Demo in Polymer