Библиотека JavaScript для составления карт

Question

Я строию приборную панель для сбытовой компании, и мне нужно построить карту Индии на ней. Он должен выделять различные состояния на карте в соответствии с продажами в этой области. Пожалуйста, предложите подходящую библиотеку JS, которая может быть полезна.

Answer 1

Используйте amCharts для динамического отображения карт.

Это позволит добавить интерактивные карты и карты с использованием amCharts библиотек

Demo

www.amCharts.com

Answer 2

Выбор подходящей библиотеки JS для этого проекта будет зависеть от нахождения одного, который позволяет построить продаж географически. Вы, вероятно, выбрали из нескольких карт вариантов:

• ГИСА карт (вероятно, более сложных, чем то, что требуется для ваших нужд)
• Карты, которые просто изображения, которые представляют собой формы похожа на ваши регионы (т.е. Индии и государства в Индии)
• Maps, которая обращается с фактической широты и долготы данных (кажется, что наилучшим образом подходит для вас)

преимущество карт широта и долгота данных является возможность построения данных точно на основе географической информации. У меня лично есть опыт работы с ZingChart, который представляет собой библиотеку JavaScript, которая предоставляет карты широты и долготы (с Индией как страной и уровнем детализации в штатах Индии).

Вот демо, как это выглядит - http://zingchart.com/playground/run/54077e9d8cd24

А вот пример типа карты выделения я думаю, что вы хотите сделать - http://www.zingchart.com/gallery/?ID=25586

Если вам нужен следующий уровень штатов в Индии, люди в ZingChart, вероятно, могли бы удовлетворить и эту просьбу. Будучи членом команды, я рад помочь, поэтому, пожалуйста, свяжитесь с нами, если у вас появятся дополнительные вопросы.

Answer 3

highcharts.com - это одно из решений для службы, которую вы ищете.

Вот пример реализации над Индией с населением, который можно легко заменить продажами в этой области.

Полный пример можно найти в следующих jsFiddle

// Initiate the chart 
$('#container').highcharts('Map', { 
    title : { 
     text : 'Highmaps basic demo' 
    }, 
    subtitle : { 
     text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/in/in-all.js">India</a>' 
    }, 
    mapNavigation: { 
     enabled: true, 
     buttonOptions: { 
      verticalAlign: 'bottom' 
     } 
    }, 
    colorAxis: { 
     min: 0 
    }, 
    series : [{ 
     data : data, 
     mapData: Highcharts.maps['countries/in/in-all'], 
     joinBy: 'hc-key', 
     name: 'Random data', 
     states: { 
      hover: { 
       color: '#BADA55' 
      } 
     }, 
     dataLabels: { 
      enabled: true, 
      format: '{point.name}' 
     } 
    }] 
});