Highcharts — это библиотека диаграмм, написанная на чистом HTML5 / JavaScript и предлагающая интуитивно понятные интерактивные диаграммы для вашего веб-сайта или веб-приложения. В настоящее время Highcharts поддерживает типы линий, сплайнов, площадей, областей, столбцов, столбцов, столбцов, круговых диаграмм, угловых индикаторов, областей, областей, столбцов, столбцов, пузырьков, прямоугольников, столбцов ошибок, воронок, водопадов и полярных диаграмм.
Недавно мне пришлось добавить еще одну ось Y в динамическую сплайн-диаграмму. С помощью простого скрипта, приведенного ниже, вы можете легко добавить 2-ю ось Y
1
2
3
4
5
6
7
8
9
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<скрипт>
$ ( функция ( ) {
$ ( документ ) . готов ( функция ( ) {
Highcharts . setOptions ( {
глобальный : {
useUTC : ложный
}
} ) ;
вар график ;
$ ( '#container' ) . высокие графики ( {
диаграмма : {
тип : 'сплайн' ,
анимация : Highcharts . SVG , // не анимируем в старом IE
marginRight : 10 ,
события : {
нагрузка : функция ( ) {
// настроить обновление графика каждую секунду
вар серии знак равно это. серия [ 0 ] ;
вар Series2 знак равно это. серия [ 1 ] ;
setInterval ( function ( ) {
вар Икс знак равно ( новый Дата ( ) ) . getTime ( ) , // Текущее время
Y знак равно Математика случайный ( ) ;
Z знак равно Математика случайный ( ) ;
серия . addPoint ( [ x , у ] , ложь , правда ) ;
серия2 . addPoint ( [ x , z ] , правда , правда ) ;
} , 1000 ) ;
}
}
} ,
название : {
текст : «Живые случайные данные»
} ,
xAxis : {
тип : 'datetime' ,
tickPixelInterval : 150
} ,
yAxis : [ {
название : {
текст : 'Value1'
} ,
plotLines : [ {
значение : 0 ,
ширина : 1 ,
цвет : '# 808080'
} ]
} ,
{
название : {
текст : «Значение2»
} ,
plotLines : [ {
значение : 0 ,
ширина : 1 ,
цвет : '# 808080'
} ]
} ] ,
подсказка : {
форматтер : функция ( ) {
вернуть '' + это. серия . название + ' b>
' + Highcharts . dateFormat ( '% Y-% m-% d% H:% M:% S' , это. х ) + '
' + Highcharts . NumberFormat ( это . у , 2 ) ;
}
} ,
легенда : {
включено : ложный
} ,
экспорт : {
включено : ложный
} ,
серия : [ {
имя : «Случайные данные» ,
данные : ( функция ( ) {
// генерируем массив случайных данных
вар данные знак равно [ ] ,
время знак равно ( новый Дата ( ) ) . getTime ( ) ,
я ;
за ( я знак равно — 19 ; я < = 0 ; я ++ ) {
данные . нажать ( {
х : время + я * 1000 ,
у : Математика случайный ( )
} ) ;
}
вернуть данные ;
} ) ( )
} ,
{
имя : «Случайные данные» ,
данные : ( функция ( ) {
// генерируем массив случайных данных
вар данные знак равно [ ] ,
время знак равно ( новый Дата ( ) ) . getTime ( ) ,
я ;
за ( я знак равно — 19 ; я < = 0 ; я ++ ) {
данные . нажать ( {
х : время + я * 1000 ,
у : Математика случайный ( )
} ) ;
}
вернуть данные ;
} ) ( )
} ]
} ) ;
} ) ;
} ) ;
скрипт>
|
Другой должен прочитать: JavaScript для проверки полей электронной почты и пароля в форме отправки события
Ниже приведен пример кода HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< HTML >
< ГОЛОВА >
< TITLE > Crunchify — динамический Сплайн HighChart пример с
множественный Y Ось < / TITLE >
|