stepline.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>Stepline Chart</title>
  8. <link href="../../assets/styles.css" rel="stylesheet" />
  9. <style>
  10. #chart {
  11. max-width: 650px;
  12. margin: 35px auto;
  13. }
  14. </style>
  15. <script>
  16. window.Promise ||
  17. document.write(
  18. '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
  19. )
  20. window.Promise ||
  21. document.write(
  22. '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
  23. )
  24. window.Promise ||
  25. document.write(
  26. '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
  27. )
  28. </script>
  29. <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  30. <script src="../../assets/irregular-data-series.js"></script>
  31. <script>
  32. var ts2 = 1484418600000;
  33. var data = [];
  34. var spikes = [5, -5, 3, -3, 8, -8]
  35. for (var i = 0; i < 30; i++) {
  36. ts2 = ts2 + 86400000;
  37. var innerArr = [ts2, dataSeries[1][i].value];
  38. data.push(innerArr)
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <div id="chart"></div>
  44. <script>
  45. var options = {
  46. series: [{
  47. data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
  48. }],
  49. chart: {
  50. type: 'line',
  51. height: 350
  52. },
  53. stroke: {
  54. curve: 'stepline',
  55. },
  56. dataLabels: {
  57. enabled: false
  58. },
  59. title: {
  60. text: 'Stepline Chart',
  61. align: 'left'
  62. },
  63. markers: {
  64. hover: {
  65. sizeOffset: 4
  66. }
  67. }
  68. };
  69. var chart = new ApexCharts(document.querySelector("#chart"), options);
  70. chart.render();
  71. </script>
  72. </body>
  73. </html>