api_legend.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  8. <script src="/js/c3.js"></script>
  9. <script>
  10. var columns = [];
  11. for (var i = 0; i < 5; i++ ) {
  12. columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
  13. }
  14. var chart = c3.generate({
  15. data: {
  16. columns: columns,
  17. },
  18. axis: {
  19. x: {
  20. type: 'category'
  21. }
  22. }
  23. });
  24. setTimeout(function () {
  25. chart.legend.hide();
  26. }, 1000);
  27. setTimeout(function () {
  28. chart = c3.generate({
  29. data: {
  30. columns: columns,
  31. },
  32. axis: {
  33. x: {
  34. type: 'category'
  35. }
  36. },
  37. legend: {
  38. position: 'right'
  39. }
  40. });
  41. }, 2000);
  42. setTimeout(function () {
  43. chart.legend.hide();
  44. }, 3000);
  45. setTimeout(function () {
  46. chart = c3.generate({
  47. data: {
  48. columns: columns,
  49. },
  50. axis: {
  51. rotated: true
  52. }
  53. });
  54. }, 4000);
  55. setTimeout(function () {
  56. chart.legend.hide();
  57. }, 5000);
  58. setTimeout(function () {
  59. chart = c3.generate({
  60. data: {
  61. columns: columns,
  62. },
  63. legend: {
  64. position: 'right'
  65. },
  66. axis: {
  67. rotated: true
  68. }
  69. });
  70. }, 6000);
  71. setTimeout(function () {
  72. chart.legend.hide();
  73. }, 7000);
  74. setTimeout(function () {
  75. chart = c3.generate({
  76. data: {
  77. columns: columns,
  78. },
  79. legend: {
  80. show: false
  81. }
  82. });
  83. }, 8000);
  84. setTimeout(function () {
  85. chart.legend.show();
  86. }, 9000);
  87. setTimeout(function () {
  88. chart = c3.generate({
  89. data: {
  90. columns: columns,
  91. },
  92. legend: {
  93. show: false
  94. },
  95. axis: {
  96. rotated: true
  97. }
  98. });
  99. }, 10000);
  100. setTimeout(function () {
  101. chart.legend.show();
  102. }, 11000);
  103. setTimeout(function () {
  104. chart = c3.generate({
  105. data: {
  106. columns: columns,
  107. },
  108. legend: {
  109. position: 'right',
  110. show: false
  111. }
  112. });
  113. }, 12000);
  114. setTimeout(function () {
  115. chart.legend.show();
  116. }, 13000);
  117. </script>
  118. </body>
  119. </html>