✅ Интерактивни диаграми с JavaScript и Highcharts

Съдържание

Високи класации е библиотека, написана на HTML5 и чист Javascript:

Нека да видим как работи, как е структурирана и как да я приложим на нашия уебсайт.
Структура на директория
Първо изтегляме ципа, който съдържа нашата библиотека, разархивираме го и можем да видим нашата директория с файлове и как е структурирана.

Нека да видим какво съдържа всяка директория и за какво се използва:

index.html: Това е HTML тестовата страница, с която можете да правите тестове и да преглеждате опциите по подразбиране.
примери: Тази папка съдържа целия изходен код за примерите.
графики: Тази папка съдържа изображенията, използвани в примерите.
сървър за експортиране: Това е директория, която съдържа функция от страна на сървъра за експортиране на графиката в изображение.
js: Това е основната директория на Highcharts. Всеки Javascript файл има два суфикса, първият .src.js е този, който съдържа изходния код с коментари в него, а другият .js е минимизираната версия на него.
адаптери: Ето приставките, които можете да използвате Mootools или Прототип като рамки, в тази директория е следното:

exportting.js: този файл ни дава функции за експортиране и отпечатване.

теми: Тази папка съдържа поредица от предварително изградени Javascript файлове с настройки като цвят на фона, стилове и др. Можем да заредим един от тези файлове в графиките за различни стилове.

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

Първо включваме библиотеките на Високи класации, както и библиотеките на jQuery за допълнителна функционалност:

 Highcharts Първи пример

Кривата диаграма е дефинирана в спецификацията на обекта, която съдържа всички свойства и поредицата от данни.

 var chart = new Highcharts.Chart ({диаграма: {…}, заглавие: '…' …});

След като този обект е създаден, графиката се показва в браузъра, в рамките на този обект има поредица от опции, които ще обясним по -долу.
Инструкцията renderTo казва на Highcharts да показва диаграма в HTML, по -специално вс id = "контейнер". Вариантът Тип определя вида на графиката, опциите могат да бъдат: площ, линия, сплайн и т.н. В този пример ще използваме сплайн.

 диаграма: {renderTo: 'container', тип: 'spline'}

След това задаваме заглавие и подзаглавие, които ще се появят в горната част на графиката.

 заглавие: {текст: 'Уеб браузъри …'}, субтитри: {текст: 'От 2008 г. до сега'},

При опцията за категориите в собствеността на ос съдържа масив с етикетите на всяко въвеждане на данни и с tickIntervals Разделяме начина на отпечатване на тези етикети.

 x Оста: {категории: [„януари 2008 г.“, „февруари“,…. ], tickInterval: 3},

Опциите в имота y ос Те ни позволяват да зададем заглавието на тази ос и да зададем минималната и максималната стойност, в която ще ограничим нашата графика.

 y ос: {заглавие: {текст: 'Процент%'}, мин: 0},

Собствеността на plotOptions Той контролира начина на показване на всяка поредица от данни в зависимост от типа графика.

 plotOptions: {series: {lineWidth: 2}},

Свойството series е центърът на целия конфигурационен обект, който определя данните, които ще захранват графиката.

 серия: [{name: 'Internet Explorer', данни: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {name: 'FireFox', данни: [36.4, 36.5, 37.0, 39.1, 39.8,…] }, {

Сега, когато всички части на кода са обяснени, нека видим как би изглеждал в нашия браузър.

Накрая оставям пълния код, за да можете сами да го тествате и без да забравяте, че той може да бъде персонализиран, за да го адаптира към всяка нужда.