0

Я написал такой код для вывода балунов в виде диаграммы.

ymaps.ready(function () {
    var chartParams = {
            iconLayout: 'default#pieChart',
            iconPieChartRadius: 23,
            iconPieChartCoreRadius: 15,
            iconPieChartCoreFillStyle: '#ffffff',
            iconPieChartStrokeStyle: '#ffffff',
            iconPieChartStrokeWidth: 3,
            iconPieChartCaptionMaxWidth: 200
       }

    var myMap = new ymaps.Map('map', {
            center: [45.035470, 38.975313],
            zoom: 12
        }),
        clusterer = new ymaps.Clusterer({
            groupByCoordinates: true,
        }),
    
        geoObjects = [];

        geoObjects[0] = new ymaps.Placemark([44.997023, 38.939318], {
            data: [
                {weight: 1, color: '#0770e3'},              
            ],
        }, chartParams );

        geoObjects[1] = new ymaps.Placemark([], {
            data: [
                {weight: 1, color: '#0770e3'},              
            ],
        }, chartParams );

        geoObjects[2] = new ymaps.Placemark([45.092419, 39.042203], {
            data: [
                {weight: 40, color: '#0770e3'},
                {weight: 83, color: '#d1435b'},
                {weight: 28, color: '#ff7b59'},             
            ],
        }, chartParams );

        geoObjects[3] = new ymaps.Placemark([45.099779, 38.959768], {
            data: [
                {weight: 13, color: '#00a698'},
                {weight: 209, color: '#0770e3'},
                {weight: 254, color: '#d1435b'},
                {weight: 14, color: '#ff7b59'},             
            ],
       }, chartParams );

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

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

Но я бы хотел, чтобы эти данные хранились в файле data.json по аналогии с этим примером

"type": "FeatureCollection",
    "features": [
        {"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},

Возможно кто знает, как правильно организовать такой датасет для круговой диаграммы?

1 ответ 1

1

В data.json можно хранить структуру вида:

"points": [
    {
      "coordinates": [44.997023, 38.939318],
      "data": [
        { "weight": 5, "color": '#224080' },
        { "weight": 3, "color": '#408022' },
        { "weight": 2, "color": '#802240' }
    ],
      "options": {
        "iconLayout": 'default#pieChart',
        "iconPieChartRadius": 23,
        "iconPieChartCoreRadius": 15,
        "iconPieChartCoreFillStyle": '#ffffff',
        "iconPieChartStrokeStyle": '#ffffff',
        "iconPieChartStrokeWidth": 3,
        "iconPieChartCaptionMaxWidth": 200
      }
    },
]

А для вывода проходиться вот таким циклом:

$.ajax({
  url: "data.json"
}).done(function(data) {
  data.points.forEach(function(obj) {
    myMap.geoObjects.add(
      new ymaps.Placemark(
        obj.coordinates, 
        {data: obj.data},
        obj.options
      )
    );
  });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.