5Graph - jQuery легкий гибкий плагин для построения HTML5 графиков. Возможности 5Graph:
- Псотроение нескольких графиков на одном канвасе;
- Гибкая настройка каждого графика;
- Построковая настройка всплывающих подсказок;
- Автоматическая маштабируемость графика;
Первое что нужно сделать подключить jQuery на страницу так как без него плагин не будет работать затем подключить сам плагин. Его можно скачать и подключить локально.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script> <script type="text/javascript" src="http://graph.prootime.ru/code/5graph.min.js" ></script>
После чего вам станет доступна функция plotgraph() которой нужно передать четыре параматра которые лучше брать с генератора, как пользоваться генератором и в целом плагином показано на следующем видео:
plotgraph([id канваса],[массив с точками],[массив общих настроек],[настройки всплвающих подсказок])
Параметры: ид канваса на котором бкдет строиться график, массив точек с описаниями, массив с общими настройками, массив с настройками внешнего вида всплывающих подсказок. Примерные массивы:
//массив точек с описаниями
var data = {'graph': [
{'point': [
{"val": 40, "gval":"10 июня", "desc": "Строка 1"},
{"val": 60, "gval":"11 июня", "desc": "Строка 1"},
{"val": 50, "gval":"12 июня", "desc": "Строка 1"},
{"val": 10, "gval":"13 июня", "desc": "Строка 1"},
{"val": 40, "gval":"14 июня", "desc": "Строка 1"},
{"val": 20, "gval":"15 июня", "desc": "Строка 1"},
{"val": 30, "gval":"16 июня", "desc": "Строка 1"},
{"val": 50, "gval":"17 июня", "desc": "Строка 1"},
{"val": 30, "gval":"18 июня", "desc": "Строка 1"},
{"val": 100, "gval":"19 июня", "desc": "Строка 1"},
{"val": 80, "gval":"20 июня", "desc": "Строка 1"},
{"val": 70, "gval":"21 июня", "desc": "Строка 1"}
],
'properties':{
'linecolor':'#8cb9c8', //цвет линий соединящих точки графика
'pointcolor':'#8cb9c8', //цвет точек
'spacecolor':'#8cb9c8', //цвет области под графиком
'linewidth':2, //толщина линий соединяющие точки
'pointradius':3, //радиус точек
'spacealpha':0.1, //степень прозрачности области под графиком
'activepointwidth':4 //радиус активной точки
}
}]};
//массив с основными настройками
var properties = {
"background":"#ffffff", //общий фон
"linescolor":"#dbdbdb", //цвет сетки
"lineswidth":1, //ширина линий сетки
"gridwidth":141, //минимальное расстояние между вертикальными линиями
"gorizontfontcolor":"#969696", //цвет текста на горизонтальных линиях
"verticalfontcolor":"#969696", //цвет текста на вертикальных линиях
"gorizontfont":"bold 11px Arial", //шрифт на горизонтальных линиях
"verticalfont":"bold 11px Arial", //шрифт на вертикальных линиях
};
//массив для настройки вида вспывающих подсказок
var hints = {
'background':'#4a4a4a', //фон подсказки
'bordercolor':'#000', //цвет границы
'borderwidth':2, //ширина границы
'paddingtb':2, //отступы сверху и снизу
'paddinglr':5, //отступы слева и справа
'borderradius':6, //закругленность прямоугольника
'lineheight':2, //расстояние между строками
'font':[ //шрифты построчно
{'color':'#fff','font':'bold 12px Verdana'}//первоя строка
]
};
Обсуждаем плагин на этой странице: http://prootime.ru/5graph-jquery-pugin
После подключения плагина к странице вам доступна функция plotgraph() которой нужно передать 4 пареметра первый параметр ид канваса на котором будет построен график, например #canvas, вторым параметром нужно передать в данные графиков, это значение каждой точки графика, его описание и настройки внешнего вида графика в подмассиве. Третим параметром передаеьтся массив общих настроек графика это общий фон, цвет и тольщина сетки и т.д. , четвертым параметром настройки всплывающих подсказок.
| Данные графиков | |
|---|---|
| point | Массив точек с описаниями |
| properties | Массив настроек внешнего вида данного графика |
| properties.linecolor | Цвет линий соединящих точки графика |
| properties.pointcolor | Цвет точек |
| properties.spacecolor | Цвет области под графиком |
| properties.linewidth | Толщина линий соединяющие точки |
| properties.pointradius | Радиус точек |
| properties.spacealpha | Степень прозрачности области под графиком |
| properties.activepointwidth | Радиус активной точки |
| Общие настройки | |
|---|---|
| background | Общий фон |
| linescolor | Цвет сетки |
| lineswidth | Ширина линий сетки |
| gridwidth | Минимальное расстояние между вертикальными линиями |
| gorizontfontcolor | Цвет текста на горизонтальных линиях |
| verticalfontcolor | Цвет текста на вертикальных линиях |
| gorizontfont | Шрифт на горизонтальных линиях |
| verticalfont | Шрифт на вертикальных линиях |
| Настройки подсказок | |
|---|---|
| background | Фон подсказки |
| bordercolor | Цвет границы |
| borderwidth | Ширина границы |
| paddingtb | Отступы сверху и снизу |
| paddinglr | Отступы слева и справа |
| borderradius | Закругленность прямоугольника |
| lineheight | Расстояние между строками |