Open skitale-design opened 4 years ago
Образец без актуальных данных - http://www.psycookbook.ru/covid/map.php Доки yandex-api - https://tech.yandex.ru/maps/jsbox/2.1/object_manager
Надо просто положить Json файл с координатами и остальными данными, которые хочется выводить на диаграмме, рядом с html-файлом.
Подправленный скрипт, который добавляет на карту именно круговые диаграммы вместо обычных меток. (Значения у всех одинаковые пока):
<script> ymaps.ready(init); $data = "dataS"; function init () { var myMap = new ymaps.Map('map', { center: [55.76, 37.64], zoom: 10 }, { searchControlProvider: 'yandex#search' }), objectManager = new ymaps.ObjectManager({ // Чтобы метки начали кластеризоваться, выставляем опцию. clusterize: true, // ObjectManager принимает те же опции, что и кластеризатор. gridSize: 32, clusterDisableClickZoom: true }); objectManager.objects.options.set('preset', 'islands#greenDotIcon'); objectManager.clusters.options.set('preset', 'islands#greenClusterIcons'); $.ajax({ url: "data.json" }).done(function(data) { $data = data; objectManager.add(data); $data.features.forEach(function(el){ console.log(el); arr = el.geometry.coordinates; $id = el.id; $iconCaption = el.properties.iconCaption; $description = el.properties.description; var myPieChart = new ymaps.Placemark(arr, { // Данные для построения диаграммы. data: [ {weight: 8, color: '#ed7070'}, {weight: 6, color: '#268E00'}, {weight: 4, color: '#4F4FD9'} ], iconCaption: $iconCaption, iconContent: $id, balloonContent: $description }, { // Зададим произвольный макет метки. iconLayout: 'default#pieChart', // Радиус диаграммы в пикселях. iconPieChartRadius: 20, // Радиус центральной части макета. iconPieChartCoreRadius: 10, // Стиль заливки центральной части. iconPieChartCoreFillStyle: '#ffffff', // Cтиль линий-разделителей секторов и внешней обводки диаграммы. iconPieChartStrokeStyle: '#ffffff', // Ширина линий-разделителей секторов и внешней обводки диаграммы. iconPieChartStrokeWidth: 3, // Максимальная ширина подписи метки. iconPieChartCaptionMaxWidth: 200 }); myMap.geoObjects.add(myPieChart); }); }); } </script>
Образец без актуальных данных - http://www.psycookbook.ru/covid/map.php Доки yandex-api - https://tech.yandex.ru/maps/jsbox/2.1/object_manager
Надо просто положить Json файл с координатами и остальными данными, которые хочется выводить на диаграмме, рядом с html-файлом.
Подправленный скрипт, который добавляет на карту именно круговые диаграммы вместо обычных меток. (Значения у всех одинаковые пока):