Javascript 在传单弹出窗口中插入NVD3图表
在我的Javascript 在传单弹出窗口中插入NVD3图表,javascript,angularjs,popup,leaflet,angular-nvd3,Javascript,Angularjs,Popup,Leaflet,Angular Nvd3,在我的AngularJsweb应用程序中,我正在使用和构建地图 要渲染我正在使用的图表和 我得到了来自世界各地的不同数据,我为每个收到数据的国家展示了一个简单的CircleMarker 我的数据是这样组织的: { US : {country:"US", count:10, rate: {high: 3, medium: 4, low: 3}}, IT : {country:"IT", count:4, rate: {high: 1, medium: 1, low: 2}} } $sco
AngularJs
web应用程序中,我正在使用和构建地图
要渲染我正在使用的图表和
我得到了来自世界各地的不同数据,我为每个收到数据的国家展示了一个简单的CircleMarker
我的数据是这样组织的:
{
US : {country:"US", count:10, rate: {high: 3, medium: 4, low: 3}},
IT : {country:"IT", count:4, rate: {high: 1, medium: 1, low: 2}}
}
$scope.$on('marker:click', function(caller, countrycode, count, rates){
console.log('received', countrycode, count, rates)
var width = 500,
height = 500
nv.addGraph(function(){
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.width(width)
.height(height);
d3.select("#chart-"+countrycode)
.datum(rates)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
})
})
这意味着在地图中,美国和意大利的中心将显示一个圆圈标记
现在让我们来讨论这个问题,我在每个CircleMarker
上绑定一个弹出窗口,我希望每个弹出窗口都包含一个nvd3
饼(特别是一个甜甜圈)图,该图将显示该特定国家的费率的分布情况
问题是,当前地图渲染正确,标记放置完美,但当我单击标记时,出现的弹出窗口是空的(见图)。我在谷歌上搜索过,但找不到任何能帮助我的东西
这就是我如何构建圆圈标记器和集群的方法:
var markers = L.markerClusterGroup({
maxClusterRadius: 120,
iconCreateFunction: function (cluster) {
return L.divIcon({html: '<b>' + cluster.getChildCount() + '</b>', className: 'mycluster', iconSize: L.point(40, 40)});
}
})
var geolocData = {
US : {country:"US", count:10, rate: {high: 3, medium: 4, low: 3}},
IT : {country:"IT", count:4, rate: {high: 1, medium: 1, low: 2}}
}
for (key in geolocData){
var latlng = retrieveLatLongFromCountryCode(key)
var marker = new L.circleMarker(latlng, {stroke: false, className:'the-marker-class', fillOpacity: 1, color:'#00FF00', weight: 1})
var popupChartOptions = {
chart: {
type: 'pieChart',
height: 140,
donut: true,
donutRatio: 0.40,
x: function(d) { return d.label },
y: function(d) { return d.value },
color: [
'#2ecc71',
'#f1c40f',
'#e74c3c',
],
valueFormat: d3.format(',.0d')
}
}
var popupChartData = [{
label: 'low',
value: geolocData[key].rate.low
}, {
label: 'medium',
value: geolocData[key].rate.medium
}, {
label: 'high',
value: geolocData[key].rate.high
}]
marker.bindPopup('<nvd3 options="chartOptions" data="chartData"></nvd3>')
markers.addLayers(marker)
}
map.addLayer(markers)
然后我在地图中使用这个CustomCircleMarker
var marker = new customCircleMarker(latlng, {stroke: false, className: 'the-class-name', fillOpacity: 1, weight: 1})
var popupChartData = [{
label: 'low',
value: [geolocLoad[key].rate.low]
}, {
label: 'medium',
value: [geolocLoad[key].rate.medium]
}, {
label: 'high',
value: [geolocLoad[key].rate.high]
}]
然后我绑定弹出窗口,用我的自定义数据填充标记,并创建一个onclick
回调,它会发出一条包含我有用数据的消息
marker.bindPopup('<div id="chart-' + key + '"></div>')
marker.countrycode = key
marker.rates = popupChartData
marker.count = geolocLoad[key].count
marker.on('click', function(e){
$scope.$emit('marker:click', this.countrycode, this.count, this.rates)
})
可悲的是,这又不起作用了。。
注意:我没有使用angular传单指令,因为我发现它太过分了,也不太喜欢它。你认为我还是用它好吗?我自己解决了这个问题,我发布了一个答案,因为它可能对未来的用户有所帮助
我忘记的最重要的一件事是在弹出窗口中插入一个
元素,这导致图表无法呈现,因为没有“画布”,因为库无法呈现它
标记生成:
var marker = new customCircleMarker(countries.names[c].latlng, {stroke: false, className: 'the-class-name', fillOpacity: 1, weight: 1})
marker.bindPopup('<div id="chart-' + key + '" class="country-popup-chart-container"><svg class="country-popup-chart"></svg></div>', {closeButton: false})
marker.countrycode = key
marker.rates = geolocLoad[key].rate
marker.count = geolocLoad[key].count
marker.on('click', function(e){
$scope.$emit('marker:click', this.countrycode, this.count, this.rates)
})
使用以下CSS
调整大小:
div.country-popup-chart-container{
height: 80px;
width: 200px;
}
最终结果是:
$scope.$on('marker:click', function(caller, countrycode, count, rates) {
var popupChartData = [{
label: 'low',
value: rates.low,
color: '#2ecc71'
}, {
label: 'medium',
value: rates.medium,
color: '#f1c40f'
}, {
label: 'high',
value: rates.high,
color: '#e74c3c'
}]
nv.addGraph(function(){
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(false)
.donut(true)
.donutRatio(0.5)
d3.select('#chart-' + countrycode + ' svg')
.datum(popupChartData)
.call(chart)
return chart
})
})
div.country-popup-chart-container{
height: 80px;
width: 200px;
}