custom_x_scale.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  8. <script src="../js/c3.js"></script>
  9. <script>
  10. var chart = c3.generate({
  11. bindto: '#chart',
  12. data: {
  13. x : 'x',
  14. columns: [
  15. ['x', 100, 120, 130, 200, 240, 500],
  16. ['data1', 30, 200, 100, 400, 150, 250],
  17. ['data2', 130, 100, 300, 200, 250, 350],
  18. ],
  19. selection: {
  20. enabled: true
  21. },
  22. onmouseover: function (d) { console.log("onmouseover", d); },
  23. onmouseout: function (d) { console.log("onmouseout", d); }
  24. },
  25. });
  26. setTimeout(function () {
  27. chart.load({
  28. columns: [
  29. ['data1', 100, 210, 150, 200, 100, 150],
  30. ]
  31. });
  32. }, 1000);
  33. setTimeout(function () {
  34. chart.x([200, 210, 350, 400, 550, 750]);
  35. }, 2000);
  36. setTimeout(function () {
  37. chart.load({
  38. columns: [
  39. ['data3', 300, 410, 350, 400, 500, 350],
  40. ]
  41. });
  42. }, 3000);
  43. setTimeout(function () {
  44. chart.load({
  45. columns: [
  46. ['x', 130, 140, 200, 300, 450, 550],
  47. ['sample', 200, 350, 100, 200, 50, 100]
  48. ]
  49. })
  50. }, 4000);
  51. </script>
  52. </body>
  53. </html>