index.htm 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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="../../code/highcharts.js"></script>
  12. <script src="../../code/highcharts-more.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; max-width: 400px; height: 400px; margin: 0 auto"></div>
  16. <script type="text/javascript">
  17. Highcharts.chart('container', {
  18. chart: {
  19. polar: true
  20. },
  21. title: {
  22. text: 'Highcharts Polar Chart'
  23. },
  24. subtitle: {
  25. text: 'Also known as Radar Chart'
  26. },
  27. pane: {
  28. startAngle: 0,
  29. endAngle: 360
  30. },
  31. xAxis: {
  32. tickInterval: 45,
  33. min: 0,
  34. max: 360,
  35. labels: {
  36. format: '{value}°'
  37. }
  38. },
  39. yAxis: {
  40. min: 0
  41. },
  42. plotOptions: {
  43. series: {
  44. pointStart: 0,
  45. pointInterval: 45
  46. },
  47. column: {
  48. pointPadding: 0,
  49. groupPadding: 0
  50. }
  51. },
  52. series: [{
  53. type: 'column',
  54. name: 'Column',
  55. data: [8, 7, 6, 5, 4, 3, 2, 1],
  56. pointPlacement: 'between'
  57. }, {
  58. type: 'line',
  59. name: 'Line',
  60. data: [1, 2, 3, 4, 5, 6, 7, 8]
  61. }, {
  62. type: 'area',
  63. name: 'Area',
  64. data: [1, 8, 2, 7, 3, 6, 4, 5]
  65. }]
  66. });
  67. </script>
  68. </body>
  69. </html>