在Leaflet上使用Charts.js对饼图进行聚类

时间:2014-09-22 09:36:04

标签: javascript leaflet pie-chart markerclusterer chart.js

我正在尝试使用下面的代码创建一个带有饼图的集群地图,但没有成功。

markercluster = L.markerClusterGroup({maxclustersRadius: 2 * rmax //,iconCreateFunction: testcluster } // add a pie chart here with Chart.js
                                     }),

如您所见,我尝试在iconCreateFunction选项中创建自定义Chart作为testcluster。

testcluster函数如下所示:

function testcluster(cluster) {

var ctx = document.getElementById("marker-cluster").getContext("2d"),

children = cluster.getAllChildMarkers(),

html = new Chart(ctx).Pie(children,{
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke : true,
//String - The colour of each segment stroke
segmentStrokeColor : "#fff"
}),
//Create the div

myPieChart = new L.DivIcon({ 

html: html,
className: 'marker-cluster'
} );


return myPieChart;

}

我打算在这里创建一个总结的饼图,因为我缩小并希望在放大时分割数据。我已经检查了D3版本,但发现它太复杂了,决定用图表来做.js文件。但任何可行且易于使用的lib都可以。

我已经上传了http://bl.ocks.org/gisminister/10001728数据,但我打算在没有D3.js的情况下进行此操作

jsfiddle:http://jsfiddle.net/kuof3L5j/

提前致谢。

0 个答案:

没有答案