index.htm 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Highcharts Example</title>
  7. <style type="text/css">
  8. #container {
  9. min-width: 30px;
  10. max-width: 600px;
  11. height: 500px;
  12. margin: 1em auto;
  13. }
  14. #csv {
  15. display: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <script src="../../code/highcharts.js"></script>
  21. <script src="../../code/modules/vector.js"></script>
  22. <script src="../../code/modules/exporting.js"></script>
  23. <div id="container"></div>
  24. <script type="text/javascript">
  25. Highcharts.chart('container', {
  26. title: {
  27. text: 'Highcharts Vector plot'
  28. },
  29. xAxis: {
  30. min: 0,
  31. max: 100,
  32. gridLineWidth: 1
  33. },
  34. yAxis: {
  35. min: 0,
  36. max: 100
  37. },
  38. series: [{
  39. type: 'vector',
  40. name: 'Sample vector field',
  41. color: Highcharts.getOptions().colors[1],
  42. data: [
  43. [5, 5, 190, 18],
  44. [5, 10, 185, 27],
  45. [5, 15, 180, 36],
  46. [5, 20, 175, 45],
  47. [5, 25, 170, 54],
  48. [5, 30, 165, 63],
  49. [5, 35, 160, 72],
  50. [5, 40, 155, 81],
  51. [5, 45, 150, 90],
  52. [5, 50, 145, 99],
  53. [5, 55, 140, 108],
  54. [5, 60, 135, 117],
  55. [5, 65, 130, 126],
  56. [5, 70, 125, 135],
  57. [5, 75, 120, 144],
  58. [5, 80, 115, 153],
  59. [5, 85, 110, 162],
  60. [5, 90, 105, 171],
  61. [5, 95, 100, 180],
  62. [10, 5, 185, 27],
  63. [10, 10, 180, 36],
  64. [10, 15, 175, 45],
  65. [10, 20, 170, 54],
  66. [10, 25, 165, 63],
  67. [10, 30, 160, 72],
  68. [10, 35, 155, 81],
  69. [10, 40, 150, 90],
  70. [10, 45, 145, 99],
  71. [10, 50, 140, 108],
  72. [10, 55, 135, 117],
  73. [10, 60, 130, 126],
  74. [10, 65, 125, 135],
  75. [10, 70, 120, 144],
  76. [10, 75, 115, 153],
  77. [10, 80, 110, 162],
  78. [10, 85, 105, 171],
  79. [10, 90, 100, 180],
  80. [10, 95, 95, 189],
  81. [15, 5, 180, 36],
  82. [15, 10, 175, 45],
  83. [15, 15, 170, 54],
  84. [15, 20, 165, 63],
  85. [15, 25, 160, 72],
  86. [15, 30, 155, 81],
  87. [15, 35, 150, 90],
  88. [15, 40, 145, 99],
  89. [15, 45, 140, 108],
  90. [15, 50, 135, 117],
  91. [15, 55, 130, 126],
  92. [15, 60, 125, 135],
  93. [15, 65, 120, 144],
  94. [15, 70, 115, 153],
  95. [15, 75, 110, 162],
  96. [15, 80, 105, 171],
  97. [15, 85, 100, 180],
  98. [15, 90, 95, 189],
  99. [15, 95, 90, 198],
  100. [20, 5, 175, 45],
  101. [20, 10, 170, 54],
  102. [20, 15, 165, 63],
  103. [20, 20, 160, 72],
  104. [20, 25, 155, 81],
  105. [20, 30, 150, 90],
  106. [20, 35, 145, 99],
  107. [20, 40, 140, 108],
  108. [20, 45, 135, 117],
  109. [20, 50, 130, 126],
  110. [20, 55, 125, 135],
  111. [20, 60, 120, 144],
  112. [20, 65, 115, 153],
  113. [20, 70, 110, 162],
  114. [20, 75, 105, 171],
  115. [20, 80, 100, 180],
  116. [20, 85, 95, 189],
  117. [20, 90, 90, 198],
  118. [20, 95, 85, 207],
  119. [25, 5, 170, 54],
  120. [25, 10, 165, 63],
  121. [25, 15, 160, 72],
  122. [25, 20, 155, 81],
  123. [25, 25, 150, 90],
  124. [25, 30, 145, 99],
  125. [25, 35, 140, 108],
  126. [25, 40, 135, 117],
  127. [25, 45, 130, 126],
  128. [25, 50, 125, 135],
  129. [25, 55, 120, 144],
  130. [25, 60, 115, 153],
  131. [25, 65, 110, 162],
  132. [25, 70, 105, 171],
  133. [25, 75, 100, 180],
  134. [25, 80, 95, 189],
  135. [25, 85, 90, 198],
  136. [25, 90, 85, 207],
  137. [25, 95, 80, 216],
  138. [30, 5, 165, 63],
  139. [30, 10, 160, 72],
  140. [30, 15, 155, 81],
  141. [30, 20, 150, 90],
  142. [30, 25, 145, 99],
  143. [30, 30, 140, 108],
  144. [30, 35, 135, 117],
  145. [30, 40, 130, 126],
  146. [30, 45, 125, 135],
  147. [30, 50, 120, 144],
  148. [30, 55, 115, 153],
  149. [30, 60, 110, 162],
  150. [30, 65, 105, 171],
  151. [30, 70, 100, 180],
  152. [30, 75, 95, 189],
  153. [30, 80, 90, 198],
  154. [30, 85, 85, 207],
  155. [30, 90, 80, 216],
  156. [30, 95, 75, 225],
  157. [35, 5, 160, 72],
  158. [35, 10, 155, 81],
  159. [35, 15, 150, 90],
  160. [35, 20, 145, 99],
  161. [35, 25, 140, 108],
  162. [35, 30, 135, 117],
  163. [35, 35, 130, 126],
  164. [35, 40, 125, 135],
  165. [35, 45, 120, 144],
  166. [35, 50, 115, 153],
  167. [35, 55, 110, 162],
  168. [35, 60, 105, 171],
  169. [35, 65, 100, 180],
  170. [35, 70, 95, 189],
  171. [35, 75, 90, 198],
  172. [35, 80, 85, 207],
  173. [35, 85, 80, 216],
  174. [35, 90, 75, 225],
  175. [35, 95, 70, 234],
  176. [40, 5, 155, 81],
  177. [40, 10, 150, 90],
  178. [40, 15, 145, 99],
  179. [40, 20, 140, 108],
  180. [40, 25, 135, 117],
  181. [40, 30, 130, 126],
  182. [40, 35, 125, 135],
  183. [40, 40, 120, 144],
  184. [40, 45, 115, 153],
  185. [40, 50, 110, 162],
  186. [40, 55, 105, 171],
  187. [40, 60, 100, 180],
  188. [40, 65, 95, 189],
  189. [40, 70, 90, 198],
  190. [40, 75, 85, 207],
  191. [40, 80, 80, 216],
  192. [40, 85, 75, 225],
  193. [40, 90, 70, 234],
  194. [40, 95, 65, 243],
  195. [45, 5, 150, 90],
  196. [45, 10, 145, 99],
  197. [45, 15, 140, 108],
  198. [45, 20, 135, 117],
  199. [45, 25, 130, 126],
  200. [45, 30, 125, 135],
  201. [45, 35, 120, 144],
  202. [45, 40, 115, 153],
  203. [45, 45, 110, 162],
  204. [45, 50, 105, 171],
  205. [45, 55, 100, 180],
  206. [45, 60, 95, 189],
  207. [45, 65, 90, 198],
  208. [45, 70, 85, 207],
  209. [45, 75, 80, 216],
  210. [45, 80, 75, 225],
  211. [45, 85, 70, 234],
  212. [45, 90, 65, 243],
  213. [45, 95, 60, 252],
  214. [50, 5, 145, 99],
  215. [50, 10, 140, 108],
  216. [50, 15, 135, 117],
  217. [50, 20, 130, 126],
  218. [50, 25, 125, 135],
  219. [50, 30, 120, 144],
  220. [50, 35, 115, 153],
  221. [50, 40, 110, 162],
  222. [50, 45, 105, 171],
  223. [50, 50, 100, 180],
  224. [50, 55, 95, 189],
  225. [50, 60, 90, 198],
  226. [50, 65, 85, 207],
  227. [50, 70, 80, 216],
  228. [50, 75, 75, 225],
  229. [50, 80, 70, 234],
  230. [50, 85, 65, 243],
  231. [50, 90, 60, 252],
  232. [50, 95, 55, 261],
  233. [55, 5, 140, 108],
  234. [55, 10, 135, 117],
  235. [55, 15, 130, 126],
  236. [55, 20, 125, 135],
  237. [55, 25, 120, 144],
  238. [55, 30, 115, 153],
  239. [55, 35, 110, 162],
  240. [55, 40, 105, 171],
  241. [55, 45, 100, 180],
  242. [55, 50, 95, 189],
  243. [55, 55, 90, 198],
  244. [55, 60, 85, 207],
  245. [55, 65, 80, 216],
  246. [55, 70, 75, 225],
  247. [55, 75, 70, 234],
  248. [55, 80, 65, 243],
  249. [55, 85, 60, 252],
  250. [55, 90, 55, 261],
  251. [55, 95, 50, 270],
  252. [60, 5, 135, 117],
  253. [60, 10, 130, 126],
  254. [60, 15, 125, 135],
  255. [60, 20, 120, 144],
  256. [60, 25, 115, 153],
  257. [60, 30, 110, 162],
  258. [60, 35, 105, 171],
  259. [60, 40, 100, 180],
  260. [60, 45, 95, 189],
  261. [60, 50, 90, 198],
  262. [60, 55, 85, 207],
  263. [60, 60, 80, 216],
  264. [60, 65, 75, 225],
  265. [60, 70, 70, 234],
  266. [60, 75, 65, 243],
  267. [60, 80, 60, 252],
  268. [60, 85, 55, 261],
  269. [60, 90, 50, 270],
  270. [60, 95, 45, 279],
  271. [65, 5, 130, 126],
  272. [65, 10, 125, 135],
  273. [65, 15, 120, 144],
  274. [65, 20, 115, 153],
  275. [65, 25, 110, 162],
  276. [65, 30, 105, 171],
  277. [65, 35, 100, 180],
  278. [65, 40, 95, 189],
  279. [65, 45, 90, 198],
  280. [65, 50, 85, 207],
  281. [65, 55, 80, 216],
  282. [65, 60, 75, 225],
  283. [65, 65, 70, 234],
  284. [65, 70, 65, 243],
  285. [65, 75, 60, 252],
  286. [65, 80, 55, 261],
  287. [65, 85, 50, 270],
  288. [65, 90, 45, 279],
  289. [65, 95, 40, 288],
  290. [70, 5, 125, 135],
  291. [70, 10, 120, 144],
  292. [70, 15, 115, 153],
  293. [70, 20, 110, 162],
  294. [70, 25, 105, 171],
  295. [70, 30, 100, 180],
  296. [70, 35, 95, 189],
  297. [70, 40, 90, 198],
  298. [70, 45, 85, 207],
  299. [70, 50, 80, 216],
  300. [70, 55, 75, 225],
  301. [70, 60, 70, 234],
  302. [70, 65, 65, 243],
  303. [70, 70, 60, 252],
  304. [70, 75, 55, 261],
  305. [70, 80, 50, 270],
  306. [70, 85, 45, 279],
  307. [70, 90, 40, 288],
  308. [70, 95, 35, 297],
  309. [75, 5, 120, 144],
  310. [75, 10, 115, 153],
  311. [75, 15, 110, 162],
  312. [75, 20, 105, 171],
  313. [75, 25, 100, 180],
  314. [75, 30, 95, 189],
  315. [75, 35, 90, 198],
  316. [75, 40, 85, 207],
  317. [75, 45, 80, 216],
  318. [75, 50, 75, 225],
  319. [75, 55, 70, 234],
  320. [75, 60, 65, 243],
  321. [75, 65, 60, 252],
  322. [75, 70, 55, 261],
  323. [75, 75, 50, 270],
  324. [75, 80, 45, 279],
  325. [75, 85, 40, 288],
  326. [75, 90, 35, 297],
  327. [75, 95, 30, 306],
  328. [80, 5, 115, 153],
  329. [80, 10, 110, 162],
  330. [80, 15, 105, 171],
  331. [80, 20, 100, 180],
  332. [80, 25, 95, 189],
  333. [80, 30, 90, 198],
  334. [80, 35, 85, 207],
  335. [80, 40, 80, 216],
  336. [80, 45, 75, 225],
  337. [80, 50, 70, 234],
  338. [80, 55, 65, 243],
  339. [80, 60, 60, 252],
  340. [80, 65, 55, 261],
  341. [80, 70, 50, 270],
  342. [80, 75, 45, 279],
  343. [80, 80, 40, 288],
  344. [80, 85, 35, 297],
  345. [80, 90, 30, 306],
  346. [80, 95, 25, 315],
  347. [85, 5, 110, 162],
  348. [85, 10, 105, 171],
  349. [85, 15, 100, 180],
  350. [85, 20, 95, 189],
  351. [85, 25, 90, 198],
  352. [85, 30, 85, 207],
  353. [85, 35, 80, 216],
  354. [85, 40, 75, 225],
  355. [85, 45, 70, 234],
  356. [85, 50, 65, 243],
  357. [85, 55, 60, 252],
  358. [85, 60, 55, 261],
  359. [85, 65, 50, 270],
  360. [85, 70, 45, 279],
  361. [85, 75, 40, 288],
  362. [85, 80, 35, 297],
  363. [85, 85, 30, 306],
  364. [85, 90, 25, 315],
  365. [85, 95, 20, 324],
  366. [90, 5, 105, 171],
  367. [90, 10, 100, 180],
  368. [90, 15, 95, 189],
  369. [90, 20, 90, 198],
  370. [90, 25, 85, 207],
  371. [90, 30, 80, 216],
  372. [90, 35, 75, 225],
  373. [90, 40, 70, 234],
  374. [90, 45, 65, 243],
  375. [90, 50, 60, 252],
  376. [90, 55, 55, 261],
  377. [90, 60, 50, 270],
  378. [90, 65, 45, 279],
  379. [90, 70, 40, 288],
  380. [90, 75, 35, 297],
  381. [90, 80, 30, 306],
  382. [90, 85, 25, 315],
  383. [90, 90, 20, 324],
  384. [90, 95, 15, 333],
  385. [95, 5, 100, 180],
  386. [95, 10, 95, 189],
  387. [95, 15, 90, 198],
  388. [95, 20, 85, 207],
  389. [95, 25, 80, 216],
  390. [95, 30, 75, 225],
  391. [95, 35, 70, 234],
  392. [95, 40, 65, 243],
  393. [95, 45, 60, 252],
  394. [95, 50, 55, 261],
  395. [95, 55, 50, 270],
  396. [95, 60, 45, 279],
  397. [95, 65, 40, 288],
  398. [95, 70, 35, 297],
  399. [95, 75, 30, 306],
  400. [95, 80, 25, 315],
  401. [95, 85, 20, 324],
  402. [95, 90, 15, 333],
  403. [95, 95, 10, 342]
  404. ]
  405. }]
  406. });
  407. // The sample data was created using this formula:
  408. /*
  409. function generateData() {
  410. var data = [],
  411. x,
  412. y,
  413. length,
  414. direction;
  415. for (x = 5; x < 100; x += 5) {
  416. for (y = 5; y < 100; y += 5) {
  417. length = Math.round(200 - (x + y));
  418. direction = Math.round((x + y) / 200 * 360);
  419. data.push([
  420. x,
  421. y,
  422. length,
  423. direction
  424. ].join(', '));
  425. }
  426. }
  427. console.log('[\n [' + data.join('],\n [') + ']\n]');
  428. }
  429. generateData();
  430. // */
  431. </script>
  432. </body>
  433. </html>