index.htm 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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/modules/funnel.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: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
  16. <script type="text/javascript">
  17. Highcharts.chart('container', {
  18. chart: {
  19. type: 'funnel'
  20. },
  21. title: {
  22. text: 'Sales funnel'
  23. },
  24. plotOptions: {
  25. series: {
  26. dataLabels: {
  27. enabled: true,
  28. format: '<b>{point.name}</b> ({point.y:,.0f})',
  29. color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
  30. softConnector: true
  31. },
  32. center: ['40%', '50%'],
  33. neckWidth: '30%',
  34. neckHeight: '25%',
  35. width: '80%'
  36. }
  37. },
  38. legend: {
  39. enabled: false
  40. },
  41. series: [{
  42. name: 'Unique users',
  43. data: [
  44. ['Website visits', 15654],
  45. ['Downloads', 4064],
  46. ['Requested price list', 1987],
  47. ['Invoice sent', 976],
  48. ['Finalized', 846]
  49. ]
  50. }]
  51. });
  52. </script>
  53. </body>
  54. </html>