Веб-диаграммы, построенные на JavaScript, являются отличным способом добавить интерактивность вашим приложениям и сайтам, но если вы предпочитаете работать в jQuery , ваши возможности могут быть ограничены. Разработчикам часто приходится выбирать между удобством или возможностями. Все навороты в 100 строк кода или более простая версия в 30? Чтобы решить эту проблему, команда ZingChart разработала оболочку для использования своего API с синтаксисом jQuery, что позволяет разработчикам быстро создавать диаграммы с необходимой им интерактивностью.
Случаи общего пользования
Для каждой функции в API ZingChart существует вызов jQuery — все 169 из них. В этом уроке мы рассмотрим несколько из них в трех наиболее распространенных случаях использования:
- Манипулирование DOM
- Манипулирование диаграммой
- Использование данных AJAX
Вы можете просмотреть полную ссылку на странице Github-оболочки ZingChart jQuery .
Скрипты и файлы
Если у вас нет копии библиотеки ZingChart или оболочки jQuery, есть несколько вариантов:
- Возьмите его прямо из CDN Link — http://cdn.zingchart.com/
- Загрузите его с GitHub — https://github.com/zingchart/ZingChart-jQuery
- Загрузите его через Bower (
bower install zingchart-jquery)
Настройка
Настройте свой HTML-файл, включив библиотеку ZingChart и любые дополнительные модули, которые вам нужны. Вам также нужно будет включить jQuery и, наконец, оболочку ZingChart jQuery. Оболочка совместима с jQuery версий 1.x и 2.x.
|
1
2
3
4
5
6
7
8
|
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>ZingChart jQuery Wrapper Demo</title>
<script src=»http://cdn.zingchart.com/zingchart.min.js»></script>
<script src=»https://code.jquery.com/jquery-2.1.3.min.js»></script>
<script src=»http://cdn.zingchart.com/zingchart.jquery.min.js»></script>
|
Инициализация диаграмм теперь выполняется напрямую с помощью .zingchart() . Этот метод (и все остальные, которые принимают объект в качестве параметра) может получать данные диаграммы напрямую или по ссылке (в этом случае данные хранятся в переменной data1 ).
Инициация по ссылке
|
1
2
3
|
$(«#demo-1»).zingchart({
data: data1
});
|
Инициирование с данными
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
//Init chart with data directly
$(«#demo-2»).zingchart({
data: {
type: «line»,
«background-color»:»#eff0f0″,
«tooltip»:{
«padding»:»20 20 20 20″,
«font-family»:»arial»,
«font-color»:»#666666″,
«border-radius»:5,
«shadow»:0
},
«scale-x»:{
«line-color»:»#666666″,
«tick»:{
«line-color»:»#666666″
},
«item»:{
«font-color»:»#666666″,
«font-family»:»arial»
}
},
«scale-y»:{
«line-color»:»#666666″,
«tick»:{
«line-color»:»#666666″
},
«item»:{
«font-color»:»#666666″,
«font-family»:»arial»
}
},
plot:{
aspect:»spline»,
«hover-state»:{
«shadow»:0
},
«marker»:{
«size»:8,
«border-width»:0,
«background-color»:»#00ccff»,
«shadow»:0
}
},
series: [
{
values: [3,4,10,2,6,5],
«line-color»:»#00ccff»,
«shadow»:0
}
]
}
});
|
1. Манипуляция DOM
Первая демонстрация является примером манипулирования DOM с использованием одного из слушателей из оболочки, .nodeHover() . При наведении курсора на узел обновляется таблица под ним, что особенно полезно в ситуациях, когда необходимо предоставить дополнительную информацию о данных диаграммы за пределами самой диаграммы. Есть прослушиватели для всех объектов диаграммы, а также для определенных событий, таких как .feedStart() , .historyBack() и многие другие.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// Bind an event listener to node hover
$(«#demo-1»).nodeHover(
// plotMouseOver function
function(){
// Get all values for the hovered plot
var plotVals = $(this).getPlotValues({
plotindex:this.event.plotindex
});
// Get hover node index
var idx = this.event.nodeindex;
for (var i = 0; i<plotVals.length; i++) {
// Set each table elem equal to the cooresponding node
$(«#table-1 td»).eq(i).text(plotVals[i])
// Highlight the corresponding hovered node in the table
$(«#table-1 td»).eq(idx).addClass(«hover»);
}
},
// plotMouseOut function
function(){
// Reset the table text
$(«#table-1 td»).each(function(){
$(this).text(«—«).removeClass(«hover»);
});
});
|
Взгляните на демо, чтобы увидеть, что это дает нам .
2. Диаграмма Манипуляции
Второй график демонстрирует манипуляцию с обратным графиком через DOM. Используя обычный jQuery, мы помещаем входные слушатели на набор ползунков. Входные данные .setNodeValue() преобразуются в int и передаются .setNodeValue() для соответствующего узла.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
$(«input[type=’range’]»).each(function(idx){
// Bind input events to each slider
$(this).on(«input»,function(){
// Get the value of each slider on input events
var newVal = parseInt($(this).val());
// Set the value of the corresponding node to the slider’s new value
$(«#demo-2»).setNodeValue({
plotindex:0,
nodeindex:idx,
value: newVal
})
});
});
|
Взгляните на демо на Codepen, чтобы увидеть, что это дает нам.
3. Загрузка данных AJAX
Загрузка новых данных совсем несложно. После успешного запроса .get передайте результаты с помощью одного из множества методов установки, таких как .appendSeriesData() , .setSeriesValues() , .modify() , .setData() и т. Д. В приведенном ниже примере мы используем .setSeriesValues() для передачи нового массива значений, возвращаемых из нашего вызова AJAX.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
// Bind a click event to the button
$(«button»).click(function(){
// Issue a get request
$.get( ‘https://api.myjson.com/bins/530az’, function() {})
// Upon a successful get request…
// (notice we haven’t even touched the ZingChart API yet)
.done(function(res){
// Store the new data in a variable (totally optional)
var newData = res.data;
// Set the series values equal to the newData
$(«#demo-3»).setSeriesValues({
«values»: [newData]
});
// Tada!
});
});
|
Опять же, взгляните на демоверсию Codepen, чтобы увидеть, что у нас сейчас есть.
Цепной
Цепочка методов — одна из самых популярных функций jQuery. Эта оболочка поддерживает связывание для любых методов или событий, которые возвращают объект jQuery. Вместо того, чтобы вызывать функции манипулирования диаграммой отдельно, теперь вы можете объединять свои вызовы в одну строку
|
1
|
$(«#myChart»).set3dView({«y-angle»:10}).resizeChart({«width»:600,»height»:400});
|
Полный демонстрационный файл доступен для скачивания.
Вывод
Это был очень быстрый прогон, демонстрирующий, как использовать jQuery для ZingChart. С этими основами вы сможете продвигать свои собственные графики намного дальше! Покажите нам свои примеры и не стесняйтесь спрашивать отзывы в комментариях.
Ресурсы
- http://www.zingchart.com
- @ZingChart в Твиттере
- зингчарт в фейсбуке
- zingchart на LinkedIn
- zingchart в Google+