index.htm 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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: 'pyramid'
  20. },
  21. title: {
  22. text: 'Sales pyramid',
  23. x: -50
  24. },
  25. plotOptions: {
  26. series: {
  27. dataLabels: {
  28. enabled: true,
  29. format: '<b>{point.name}</b> ({point.y:,.0f})',
  30. color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
  31. softConnector: true
  32. },
  33. center: ['40%', '50%'],
  34. width: '80%'
  35. }
  36. },
  37. legend: {
  38. enabled: false
  39. },
  40. series: [{
  41. name: 'Unique users',
  42. data: [
  43. ['Website visits', 15654],
  44. ['Downloads', 4064],
  45. ['Requested price list', 1987],
  46. ['Invoice sent', 976],
  47. ['Finalized', 846]
  48. ]
  49. }]
  50. });
  51. </script>
  52. </body>
  53. </html>