chart_bar_stacked.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <html>
  2. <head>
  3. <link href="../css/c3.css" rel="stylesheet" type="text/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 axis_x_type = 'category',
  11. axis_rotated = false;
  12. var generate = function () { return c3.generate({
  13. data: {
  14. columns: [
  15. ['data1', 30, 200, 200, 400, 150, -250],
  16. ['data2', 130, -100, 100, 200, 150, 50],
  17. ['data3', 230, -200, 200, 0, 250, 250]
  18. ],
  19. type: 'bar',
  20. groups: [
  21. ['data1', 'data2']
  22. ]
  23. },
  24. axis: {
  25. x: {
  26. type: axis_x_type
  27. },
  28. rotated: axis_rotated
  29. },
  30. grid: {
  31. y: {
  32. lines: [{value:0}]
  33. }
  34. },
  35. }); }, chart = generate();
  36. function update1() {
  37. chart.groups([['data1', 'data2', 'data3']])
  38. }
  39. function update2() {
  40. chart.load({
  41. columns: [['data4', 100, 50, 150, -200, 300, -100]]
  42. });
  43. }
  44. function update3() {
  45. chart.groups([['data1', 'data2', 'data3', 'data4']])
  46. }
  47. setTimeout(update1, 1000);
  48. setTimeout(update2, 2000);
  49. setTimeout(update3, 3000);
  50. setTimeout(function () {
  51. axis_rotated = true;
  52. chart = generate();
  53. }, 4000);
  54. setTimeout(update1, 5000);
  55. setTimeout(update2, 6000);
  56. setTimeout(update3, 7000);
  57. setTimeout(function () {
  58. axis_x_type = '';
  59. axis_rotated = false;
  60. chart = generate();
  61. }, 8000);
  62. setTimeout(update1, 9000);
  63. setTimeout(update2, 10000);
  64. setTimeout(update3, 11000);
  65. setTimeout(function () {
  66. axis_x_type = '';
  67. axis_rotated = true;
  68. chart = generate();
  69. }, 12000);
  70. setTimeout(update1, 13000);
  71. setTimeout(update2, 14000);
  72. setTimeout(update3, 15000);
  73. </script>
  74. </body>
  75. </html>