zoom_category.html 977 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="../css/c3.css">
  4. </head>
  5. <body>
  6. <div id="chart"></div>
  7. <button onclick="load()">Load</button>
  8. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  9. <script src="../js/c3.js"></script>
  10. <script>
  11. var chart = c3.generate({
  12. bindto: '#chart',
  13. data: {
  14. columns: [
  15. generateData(100)
  16. ],
  17. },
  18. axis: {
  19. x: {
  20. type: 'category'
  21. }
  22. },
  23. zoom: { enabled: true },
  24. subchart: { show: true }
  25. });
  26. function load() {
  27. chart.load({
  28. columns: [
  29. generateData(Math.random() * 1000)
  30. ],
  31. });
  32. }
  33. function generateData(n) {
  34. var column = ['sample'];
  35. for (var i = 0; i < n; i++) {
  36. column.push(Math.random() * 500);
  37. }
  38. return column;
  39. }
  40. </script>
  41. </body>
  42. </html>