index.htm 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. </style>
  9. </head>
  10. <body>
  11. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  12. <script src="../../code/highcharts.js"></script>
  13. <script src="../../code/modules/exporting.js"></script>
  14. <script src="../../code/modules/export-data.js"></script>
  15. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  16. <script type="text/javascript">
  17. $.getJSON(
  18. 'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
  19. function (data) {
  20. Highcharts.chart('container', {
  21. chart: {
  22. zoomType: 'x'
  23. },
  24. title: {
  25. text: 'USD to EUR exchange rate over time'
  26. },
  27. subtitle: {
  28. text: document.ontouchstart === undefined ?
  29. 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
  30. },
  31. xAxis: {
  32. type: 'datetime'
  33. },
  34. yAxis: {
  35. title: {
  36. text: 'Exchange rate'
  37. }
  38. },
  39. legend: {
  40. enabled: false
  41. },
  42. plotOptions: {
  43. area: {
  44. fillColor: {
  45. linearGradient: {
  46. x1: 0,
  47. y1: 0,
  48. x2: 0,
  49. y2: 1
  50. },
  51. stops: [
  52. [0, Highcharts.getOptions().colors[0]],
  53. [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
  54. ]
  55. },
  56. marker: {
  57. radius: 2
  58. },
  59. lineWidth: 1,
  60. states: {
  61. hover: {
  62. lineWidth: 1
  63. }
  64. },
  65. threshold: null
  66. }
  67. },
  68. series: [{
  69. type: 'area',
  70. name: 'USD to EUR',
  71. data: data
  72. }]
  73. });
  74. }
  75. );
  76. </script>
  77. </body>
  78. </html>