You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

155 lines
5.3 KiB

9 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <style type="text/css">
  8. .chart {
  9. min-width: 320px;
  10. max-width: 800px;
  11. height: 220px;
  12. margin: 0 auto;
  13. }
  14. </style>
  15. <!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
  16. <meta name="viewport" content="width=device-width, initial-scale=1" />
  17. <style>
  18. </style>
  19. <script type="text/javascript">
  20. /*
  21. The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
  22. through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
  23. small variation for each data set, and a mouse/touch event handler to bind the charts together.
  24. */
  25. $(function () {
  26. /**
  27. * In order to synchronize tooltips and crosshairs, override the
  28. * built-in events with handlers defined on the parent element.
  29. */
  30. $('#container').bind('mousemove touchmove', function (e) {
  31. var chart,
  32. point,
  33. i;
  34. for (i = 0; i < Highcharts.charts.length; i++) {
  35. chart = Highcharts.charts[i];
  36. e = chart.pointer.normalize(e); // Find coordinates within the chart
  37. point = chart.series[0].searchPoint(e, true); // Get the hovered point
  38. if (point) {
  39. point.onMouseOver(); // Show the hover marker
  40. chart.tooltip.refresh(point); // Show the tooltip
  41. chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair
  42. }
  43. }
  44. });
  45. /**
  46. * Override the reset function, we don't need to hide the tooltips and crosshairs.
  47. */
  48. Highcharts.Pointer.prototype.reset = function () {};
  49. /**
  50. * Synchronize zooming through the setExtremes event handler.
  51. */
  52. function syncExtremes(e) {
  53. var thisChart = this.chart;
  54. Highcharts.each(Highcharts.charts, function (chart) {
  55. if (chart !== thisChart) {
  56. if (chart.xAxis[0].setExtremes) { // It is null while updating
  57. chart.xAxis[0].setExtremes(e.min, e.max);
  58. }
  59. }
  60. });
  61. }
  62. // Get the data. The contents of the data file can be viewed at
  63. // https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json
  64. $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
  65. $.each(activity.datasets, function (i, dataset) {
  66. // Add X values
  67. dataset.data = Highcharts.map(dataset.data, function (val, i) {
  68. return [activity.xData[i], val];
  69. });
  70. $('<div class="chart">')
  71. .appendTo('#container')
  72. .highcharts({
  73. chart: {
  74. marginLeft: 40, // Keep all charts left aligned
  75. spacingTop: 20,
  76. spacingBottom: 20
  77. // zoomType: 'x',
  78. // pinchType: null // Disable zoom on touch devices
  79. },
  80. title: {
  81. text: dataset.name,
  82. align: 'left',
  83. margin: 0,
  84. x: 30
  85. },
  86. credits: {
  87. enabled: false
  88. },
  89. legend: {
  90. enabled: false
  91. },
  92. xAxis: {
  93. crosshair: true,
  94. events: {
  95. setExtremes: syncExtremes
  96. },
  97. labels: {
  98. format: '{value} km'
  99. }
  100. },
  101. yAxis: {
  102. title: {
  103. text: null
  104. }
  105. },
  106. tooltip: {
  107. positioner: function () {
  108. return {
  109. x: this.chart.chartWidth - this.label.width, // right aligned
  110. y: -1 // align to title
  111. };
  112. },
  113. borderWidth: 0,
  114. backgroundColor: 'none',
  115. pointFormat: '{point.y}',
  116. headerFormat: '',
  117. shadow: false,
  118. style: {
  119. fontSize: '18px'
  120. },
  121. valueDecimals: dataset.valueDecimals
  122. },
  123. series: [{
  124. data: dataset.data,
  125. name: dataset.name,
  126. type: dataset.type,
  127. color: Highcharts.getOptions().colors[i],
  128. fillOpacity: 0.3,
  129. tooltip: {
  130. valueSuffix: ' ' + dataset.unit
  131. }
  132. }]
  133. });
  134. });
  135. });
  136. });
  137. </script>
  138. </head>
  139. <body>
  140. <script src="../../js/highcharts.js"></script>
  141. <div id="container"></div>
  142. </body>
  143. </html>