Макет в виде круговой диаграммы

Open in CodeSandbox

Макет в виде круговой диаграммы layout.PieChart. Доступен в хранилище макетов под ключом 'default#pieChart'. Макет может использоваться как инструмент визуализации произвольных данных, так и в связке с другими визуальными компонентами API, такими как метки, кластеризатор, менеджер объектов.

Макет может строиться на основе статистических данных, которые должны представлять собой массив JSON-объектов с полями weight и color (вес и цвет сектора) либо функцию, возвращающую такой массив, (см. пример "Метка"). При отсутствии properties.data макет проходит по всем геообъектам, определяет значение опции iconColor каждого объекта и на основе этих данных строит диаграмму. 

<!DOCTYPE html>
<html>
    <head>
        <title>Макет в виде круговой диаграммы</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="clusterer_pie_chart.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.751574, 37.573856],
                zoom: 9,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        // Значения цветов иконок.
        placemarkColors = [
            "#DB425A",
            "#4C4DA2",
            "#00DEAD",
            "#D73AD2",
            "#F8CC4D",
            "#F88D00",
            "#AC646C",
            "#548FB7",
        ],
        clusterer = new ymaps.Clusterer({
            // Макет метки кластера pieChart.
            clusterIconLayout: "default#pieChart",
            // Радиус диаграммы в пикселях.
            clusterIconPieChartRadius: 25,
            // Радиус центральной части макета.
            clusterIconPieChartCoreRadius: 10,
            // Ширина линий-разделителей секторов и внешней обводки диаграммы.
            clusterIconPieChartStrokeWidth: 3,
            // Определяет наличие поля balloon.
            hasBalloon: false,
        }),
        points = [
            [55.831903, 37.411961],
            [55.763338, 37.565466],
            [55.763338, 37.565466],
            [55.744522, 37.616378],
            [55.780898, 37.642889],
            [55.793559, 37.435983],
            [55.800584, 37.675638],
            [55.716733, 37.589988],
            [55.775724, 37.56084],
            [55.822144, 37.433781],
            [55.87417, 37.669838],
            [55.71677, 37.482338],
            [55.78085, 37.75021],
            [55.810906, 37.654142],
            [55.865386, 37.713329],
            [55.847121, 37.525797],
            [55.778655, 37.710743],
            [55.623415, 37.717934],
            [55.863193, 37.737],
            [55.86677, 37.760113],
            [55.698261, 37.730838],
            [55.6338, 37.564769],
            [55.639996, 37.5394],
            [55.69023, 37.405853],
            [55.77597, 37.5129],
            [55.775777, 37.44218],
            [55.811814, 37.440448],
            [55.751841, 37.404853],
            [55.627303, 37.728976],
            [55.816515, 37.597163],
            [55.664352, 37.689397],
            [55.679195, 37.600961],
            [55.673873, 37.658425],
            [55.681006, 37.605126],
            [55.876327, 37.431744],
            [55.843363, 37.778445],
            [55.875445, 37.549348],
            [55.662903, 37.702087],
            [55.746099, 37.434113],
            [55.83866, 37.712326],
            [55.774838, 37.415725],
            [55.871539, 37.630223],
            [55.657037, 37.571271],
            [55.691046, 37.711026],
            [55.803972, 37.65961],
            [55.616448, 37.452759],
            [55.781329, 37.442781],
            [55.844708, 37.74887],
            [55.723123, 37.406067],
            [55.858585, 37.48498],
        ],
        geoObjects = [];

    for (var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(
            points[i],
            {},
            {
                iconColor: getRandomColor(),
            }
        );
    }

    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true,
    });

    function getRandomColor() {
        return placemarkColors[
            Math.floor(Math.random() * placemarkColors.length)
        ];
    }
});