Авторизация
Подписчики
0
Рисование графиков HTML5. Круговая диаграмма
Описание
Рисование графиков HTML5. Круговая диаграмма
Сначала создаем <div> с вашим идентификатором и размерами и подключим библиотеку. Также лучше указать размеры блока с графиком в стилях:
<style>
#zedamin{
width: 400px;
height: 400px;
}
</style>
<div id='zedamin'></div>
<!-- если Internet Explorer, то подключаем flashcanvas -->
<!--[if IE]>
<script type="text/javascript" src="
http://www.humblesof.../flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="
http://www.humblesof...s/flotr2.min.js"></script>
Здесь мы задали размер 400×400 для контейнера с идентификатором zedamin и подключили библиотеку flotr2, если браузер Internet Explorer подключаем flashcanvas, чтобы в нем тоже все работало.
Чтобы нарисовать график, нужно воспользоваться методом Flotr.draw(container, data, options). Параметры метода :
- container — это контейнер <div>
- data — это массив с данными графика
- options — это объект, содержаий настройки для определения осей по x и y, сеток, меток и т.д.
Все, что нам нужно, это создать переменные для этих параметров и определить в них то, что нам нужно.
var
//наш контейнер
container = document.getElementById("zedamin"),
//массивы с данными диаграммы: 58, 41, 1 - это проценты для каждого сектора
ios = [[0, 58]],
android = [[0, 41]],
blackBerry = [[0, 1]],
//передаем массивы и связываем секторы диаграммы с метками
data = [
{ data : ios, label : 'iOS' },
{ data : android, label : 'Android' },
{ data : blackBerry, label : 'BlackBerry',
pie : {
explode : 50 //выделяем сектор blackBerry
}
},
],
//выделяем сектор blackBerry
options = {
HtmlText : false,//true - рисуем текст с помощью HTML, false - рисуем с помощью Canvas API
grid : {
//вертикальные и горизонтальные линии (false - скрыть)
verticalLines : false,
horizontalLines : false
},
//оси x и y (false - скрыть)
xaxis : { showLabels : false },
yaxis : { showLabels : false },
pie : {
show : true,
explode : 6
},
//true - график воспринимает мышь, false - игнорирует
mouse : { track : true },
legend : {
//положение меток south-east или юго-восток (правый нижний угол контейнера)
position : 'se',
//фон группы меток
backgroundColor : '#D2E8FF'
}
};
Flotr.draw(container, data, options);//вызываем метод и передаем параметры
Рекомендуемые комментарии
Комментариев нет