Домой Учебники по JavaScript и jQuery Пример динамического сплайна HighChart с несколькими осями Y

Пример динамического сплайна HighChart с несколькими осями Y

436
0

Highcharts — это библиотека диаграмм, написанная на чистом HTML5 / JavaScript и предлагающая интуитивно понятные интерактивные диаграммы для вашего веб-сайта или веб-приложения. В настоящее время Highcharts поддерживает типы линий, сплайнов, площадей, областей, столбцов, столбцов, столбцов, круговых диаграмм, угловых индикаторов, областей, областей, столбцов, столбцов, пузырьков, прямоугольников, столбцов ошибок, воронок, водопадов и полярных диаграмм.

Недавно мне пришлось добавить еще одну ось Y в динамическую сплайн-диаграмму. С помощью простого скрипта, приведенного ниже, вы можете легко добавить 2-ю ось Y

демонстрация

Демо с двумя значениями оси 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'
                 } ]
             } ] ,
             подсказка : {
                 форматтер : функция ( ) {
                         вернуть '' + это. серия . название + '
'
+
                         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 >
type = text / javascript
src = http://code.jquery.com/jquery-1.10.1.min.js >
src = http://code.highcharts.com/highcharts.js >
src = http://code.highcharts.com/modules/exporting.js >
<скрипт>
, , , , , вышеприведенный скрипт идет сюда . , , ,
< / HEAD >
< ТЕЛО >
< div id = контейнер
style = min-width: 728px; высота: 400px; поле: 0 авто > < / div >
< / BODY >
< / HTML >
Пример динамического сплайна HighChart с несколькими осями Y

0.00 (0%) 0 votes

ЧИТАТЬ ТАКЖЕ:  JavaScript для проверки имени пользователя и полей телефона в форме отправки события

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь