Я новичок в JS и апи я.карт, поэтому знаний не хватает, чтобы сделать одну простую штуку. Сейчас постараюсь рассказать. У меня есть список адресов города (а именно - координат), в каждом из которых живут мои клиенты. И я пытаюсь отобразить это на карте с использованием круговых диаграмм. Логика проста: если клиент оплатил услугу - метка зеленая, если "ещё думает" - желтая, если отказался - красная. Вывожу эту всю красоту через кластеризацию и макет круговой диаграммы (полный ctrl+c/v - https://yandex.ru/dev/maps/jsbox/2.1/clusterer_pie_chart). В каждой метке помимо цвета - сумма денег. И вот первая проблема: в центре кластера отображается количество меток внутри кластера (в документации так и сказано - по умолчанию), а мне нужна сумма денег. И пытаюсь ещё безуспешно реализовать, чтобы при наведении на кластер он подсвечивался и рядом всплывал хинт с тремя строками: К примеру: Оплатили 2 чел 1000р, думают 5 чел на 6000р, отказ 1 чел 500р.
Данные для метки: points - координаты, colors - цвета по типу клиента(оплатил или нет), summ_points - деньги в метке, count_points - кол-во абонентов по типу в адресе (ситуация: типа в доме три абонента и все три оплатили).
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 9
}, {
searchControlProvider: 'yandex#search'
}),
clusterer = new ymaps.Clusterer({
// Макет метки кластера pieChart.
clusterIconLayout: 'default#pieChart',
// Радиус диаграммы в пикселях.
clusterIconPieChartRadius: 25,
// Радиус центральной части макета.
clusterIconPieChartCoreRadius: 10,
// Ширина линий-разделителей секторов и внешней обводки диаграммы.
clusterIconPieChartStrokeWidth: 3,
// Определяет наличие поля balloon.
hasBalloon: false,
clusterDisableClickZoom: true,
hasHint: true,
//clustericonContent =
}),
points = [
[45.0839236,38.9873438],
[45.008142,39.0342551],
[45.0050537,39.0296175],
[45.011498,39.0315749],
[45.0046905,39.0324531],
[45.012319,39.200997],
[45.0813732,38.98423],
[45.0791522,38.9863894],
[45.0765949,38.9831891],
],
colors = [
['#CD5C5C'],
['#CD5C5C'],
['#CD5C5C'],
['#F0E68C'],
['#F0E68C'],
['#F0E68C'],
['#228B22'],
['#228B22'],
['#228B22'],
],
summ_points = [
[2968,82],
[555,4],
[1677,56],
[3846,73],
[2926,23],
[4416,93],
[3259,85],
[3178,4],
[2968,82],
],
count_points = [
[1],
[1],
[4],
[2],
[1],
[1],
[1],
[1],
[1],
],
geoObjects = [];
for (var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(points[i], {weight: summ_points[i],
balloonContentHeader: `Количество ЛС: ${count_points[i]}`,
balloonContentBody: `Сумма: ${summ_points[i]} руб.`,
}, {
iconColor: colors[i]
});
}
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
});