Ваша первая карта в JavaScript

A+ A-

Предположим, что вы являетесь владельцем бизнеса и Ваши офисы расположены в 10 различных индийских штатах. Теперь вы хотите отобразить эти данные на своем сайте, то эта статья для вас, куда я иду, чтобы покрыть процесс создания интерактивной карты с помощью FusionCharts Ядро JavaScript библиотеки диаграмм и это карты пакета.

Во-первых, есть два способа отображения данных на вашем сайте:

  • Список со всеми адресами или
  • Интерактивная карта?

Если вы визуальный ученик, как и большинство людей, вы будете ехать со второй вариант - интерактивная карта.

И если вы хотите узнать, как сделать интерактивную карту, вы находитесь в правильном месте.

Для того, чтобы сделать его легко понять, я разделил этот учебник интро на четыре этапа:

  • Шаг 1: Структурирование данных
  • Шаг 2: Включение файлов JavaScript FusionCharts
  • Шаг 3: Создание элемента контейнера для диаграммы
  • Шаг 4: Визуализация карты

Шаг 1: Структурирование данных

Мы собираемся построить карту Индии, представляющих числа компьютеров с интернетом в состоянии на 2013 год Ниже табличные данные для того же:

состояние Количество компьютеров
Джамму и Кашмир 58438
Химачал-Прадеш 41344
Пенджаб 292124
и так далее…

FusionCharts понимает данные XML и JSON, и мы будем использовать JSON для этого урока.

Как у нас есть данные сейчас, мы будем формировать массив данных в формате JSON для нашей карты. Массив данных для карт состоит из одного объекта для каждого государства / организации , которая включает в себя уникальный id и value для этого состояния. Этот id действует в качестве идентификатора для государства и его соответствующее значение.

Вот как мы будем формировать данные для нашей карты:

 "данные": [
{ "ID": "015", "значение": "58438"},
    { "ID": "014", "значение": "41344"},
    { "ID": "028", "значение": "292124"},
    // Больше картографических данных ...
] 

Шаг 2: Включение FusionCharts JavaScript файлов

Это первое, что каждый веб-разработчик должен сделать до фактического программирования начинается с веб-приложений - в том числе зависимостей для проекта.

На этом этапе мы будем включать JavaScript файлы , предоставляемые FusionCharts используя <script> теги в головной части нашей веб - страницы.

Мы будем включать эти три файла:

  • Ядро FusionCharts JavaScript файла
  • FusionCharts ядро ​​карты файл
  • Файл определения карты для Индии

А вот как мы это делаем:

 <Голова>
    <тип скрипта = "текст / JavaScript" SRC = "местоположение / из / FusionCharts. JS"> </ скрипт>
    <тип скрипта = "текст / JavaScript" SRC = "местоположение / из / FusionCharts. maps.js"> </ скрипт>
    <тип скрипта = "текст / JavaScript" SRC = "местоположение / из / FusionCharts. india.js"> </ скрипт>
</ Голова> 

fusioncharts.js и fusioncharts.maps.js требуется построить любую карту, в то время как fusioncharts.india.js требуется построить карту Индии.

Для построения карты для любой другой страны или государства, вам придется включить файл JavaScript для этой конкретной страны или государства, которые доступны в пакете определения на карте, предоставленной FusionCharts.

Шаг 3: Создание элемента контейнера для диаграммы

Наша карта будет занимать свою позицию на веб - странице внутри HTML <div> элемент. Вот как мы это делаем:

 <DIV ID = "Индийская карта"> Секундочку! </ DIV> 

id для каждой карты или диаграммы на веб - странице должен быть уникальным.

Шаг 4: Визуализация карты

Теперь, когда все, что нам нужно, чтобы сделать карту на месте, мы, наконец, использовать экземпляр FusionCharts для создания объекта для нашей диаграммы.

Вот синтаксис для того же:

 FusionCharts.ready экземпляра (функция () {// // FusionCharts
    вар mapObj = новый FusionCharts ({// Карта объекта
        // Определение карты
    });
}); 

Теперь мы будем реализовывать выше синтаксис для создания объекта для нашей карты и использовать render() метод для визуализации диаграммы.

 FusionCharts.ready (функция () {
  вар mapOfIndia = новый FusionCharts ({
    Тип: "Карты / Индия",
    renderAt: "Индийская карта", // ДИВ контейнер для нашей карты
    высота: "650",
    ширина: "100%",
    DataFormat: "JSON",
    источник данных: {
      "Диаграмма": {
        "Подпись": "Количество компьютеров с доступом в Интернет в Индии",
        "SubCaption": "Перепись 2011",
        "CaptionFontSize": "25",
        // другие конфигурации диаграммы
      },

      "цветовая гамма": {
        "MinValue": "300",
        "Startlabel": "Low",
        "ENDLABEL": "High",
        "Код": "# efedf5",
        "Градиент": "1",
        "цвет": [{
          "MAXVALUE": "220000",
          "Displayvalue": "Сред.",
          "Код": "#bcbddc"
        }, {
          "MAXVALUE": "1400000",
          "Код": "# 756bb1"
        }]
      },

      "данные": [{
          "Идентификатор": "015",
          "Значение": "58438"
        }, {
          "Идентификатор": "014",
          "Значение": "41344"
        }, {
          "Идентификатор": "028",
          "Значение": "292124"
        },
        // Больше данных
      ]
    }
  }) Визуализации (). // Метод визуализации 
}); 

Если вы выполнили все шаги, описанные выше, вы должны иметь большое выглядящий карту Индии с вами как на картинке ниже -

Screen Shot 2016-03-02 в 11.09.52 AM

Следующие шаги

Базовая карта хороша для представления данных, но есть много вещей, которые можно сделать с помощью карт и диаграмм. Я обсуждаю некоторые из них ниже:

  • Настройка дизайна: FusionCharts обеспечивает тонн атрибутов настроить внешний вид изображения карты и feel.Here некоторые из атрибутов я использовал для повышения выше карты
    • captionFontSize: (INT) Используется для изменения размера шрифта в Caption.
    • BASEFONT: (строка) Используется для изменения стиля шрифта по графику. Вы не ограничены только использовать системные шрифты, но также могут выбрать для любого семейства шрифтов вам нравится. Все, что вам нужно сделать, это включить его в HTML и объявить его с помощью этого атрибута.
  • Добавление маркеров: FusionCharts обеспечивает отличную функцию в карты , чтобы добавить маркеры , которые могут быть использованы для описания местоположения как города, торговые центры и достопримечательности.
  • Переход на следующий уровень: FusionCharts позволяет принять ваш опыт а именно данные к следующему уровню, добавив удивительные функции , такие как бура вниз, аннотации и событий на вашей карте или диаграмме.

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии