Кодът по-долу съдържа библиотека за създаване на хоризонтални лентови диаграми и нейното използване. Библиотеката е минимизирана версия на .js файл.
HorizontalBarChart.min.js е минимизирана версия на .js файл, който трябва да се използва в кода
HorizontalBarChart.css е свързаният CSS файл.
Можем да създадем BarChart, предоставяйки следния списък с параметри:
1. Id : Идентификаторът на контролата, в рамките на която ще бъде създадена диаграмата. (Задължителен)
2. Височина: Височината на лентовата диаграма, в която трябва да съществува диаграмата.
3. Ширина: Ширината на лентовата диаграма, в която трябва да съществува диаграмата.
4. XAxisTicks : Брой точки по Y-ос
5. chartColor: Цветът, който всяка лента трябва да поеме
6. марж: стойности на горния, ляв, десен и долен марж
7. tooltipYPosition : Позиция на показаната подсказка
8. animationDelay : скоростта, с която лентовата диаграма се показва с анимация
9. данни: стойности по оста X и оста Y
Ако само „id“, който е задължителен параметър, е посочен като вход към диаграмата, диаграмата ще бъде изчертана със стойности по подразбиране и един цвят.
По-долу е примерен код за използване на библиотеката HorizontalBarChart.min.js за създаване на хоризонтална лентова диаграма
‹!DOCTYPE html›
‹html lang=”en” xmlns=”http://www.w3.org/1999/xhtml›
‹head›
‹meta charset=”utf -8 /›
‹title›‹/title›
‹script src=”https://code.jquery.com/jquery-1.12.4.min.js›‹/script›
‹script src=”https://d3js.org/d3.v4.min.js›‹/script›
‹link rel=”stylesheet” href=”https://code.jquery.com /ui/1.12.1/themes/base/jquery-ui.css›
‹script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js›‹/ script›
‹script type=”text/javascript” src=”Scripts/HorizontalBarChart.min.js”›‹/script›
‹link rel=”stylesheet” href=”Styles/HorizontalBarChartStyle.css ”›
‹style type=”text/css”›
#barchart{
width:300px;
height:200px;
}
‹/ style›
‹script type=”text/javascript”›
var widthOfRect=0;
$(document).ready(function(){
var id=”barchart” ;
височина=$('#barchart').height();
width=$('#barchart').width();
xAxisTicks=6;
данни =[{“yAxisValue”:”Съединени американски щати”,”xAxisValue”:200 },{“yAxisValue”:”Обединено кралство”,”xAxisValue”:500},{“yAxisValue”:”Франция”,”xAxisValue”:50},{“yAxisValue”:”Индия”,”xAxisValue”:150} ,{“yAxisValue”:”Япония”,”xAxisValue”:600},{“yAxisValue”:”Китай”,”xAxisValue”:550},{“yAxisValue”:”ШриЛанка”,”xAxisValue”:350}];
chartColor= [“#204492”, “#8DBBDC”,”#676767,”#55B957,”#2CB1DC”,”#E9691E”,”#E39A20];
margin = { “Left” : 40, “Right”: 20, “Top”: 20, “Bottom”: 30 };
animationDelay=500;
toolTipYPosition=40;
var chart = new HorizontalBarChart({ “ id": id, "height": височина, "width": ширина,"xAxisTicks":xAxisTicks,"animationDelay": animationDelay, "data": данни, "chartColor": chartColor, "margin":margin, "toolTipYPosition" :toolTipYPosition} );
// var chart = new GaugeChart({“id”: id} );
chart.createHorizontalBarChart();
});
‹/script ›
‹/head›
‹body›
‹div id=”barchart”›‹/div›
‹/body›
‹/html›
Файловете HorizontalBarChart.min.js и HorizontalBarChart.css могат да бъдат изтеглени от git от връзката по-долу
Диаграмата ще се покаже както по-долу за горните примерни данни:
При задържане на курсора на мишката върху оста Y ще се покаже подсказка за данните.
