2
0

selection.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <html>
  2. <head>
  3. <link href="/css/c3.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. grouped => true, multiple => true
  7. <div id="chart1"></div>
  8. grouped => true, multiple => true, tooltip.grouped = false
  9. <div id="chart1-1"></div>
  10. grouped => true, multiple => false
  11. <div id="chart2"></div>
  12. grouped => true, multiple => false, tooltip.grouped = false
  13. <div id="chart2-1"></div>
  14. grouped => false, multiple => true
  15. <div id="chart3"></div>
  16. grouped => false, multiple => true, tooltip.grouped = false
  17. <div id="chart3-1"></div>
  18. grouped => false, multiple => false
  19. <div id="chart4"></div>
  20. grouped => false, multiple => false, tooltip.grouped = false
  21. <div id="chart4-1"></div>
  22. <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  23. <script src="/js/c3.js"></script>
  24. <script>
  25. var chart1 = c3.generate({
  26. bindto: '#chart1',
  27. data: {
  28. columns: [
  29. ['data1', 30, 200, 100, 400, 150, 250],
  30. ['data2', 50, 20, 10, 40, 15, 25]
  31. ],
  32. selection: {
  33. enabled: true,
  34. grouped: true,
  35. multiple: true,
  36. },
  37. onclick: function (d, element) { console.log("onclick", d, element); },
  38. onselected: function (d, element) { console.log("onselected", d, element); },
  39. onunselected: function (d, element) { console.log("onunselected", d, element); },
  40. ondragstart: function () { console.log("ondragstart"); },
  41. ondragend: function () { console.log("ondragend"); },
  42. },
  43. });
  44. var chart11 = c3.generate({
  45. bindto: '#chart1-1',
  46. data: {
  47. columns: [
  48. ['data1', 30, 200, 100, 400, 150, 250],
  49. ['data2', 50, 20, 10, 40, 15, 25]
  50. ],
  51. selection: {
  52. enabled: true,
  53. grouped: true,
  54. multiple: true,
  55. },
  56. },
  57. tooltip: {
  58. grouped: false
  59. }
  60. });
  61. var chart2 = c3.generate({
  62. bindto: '#chart2',
  63. data: {
  64. columns: [
  65. ['data1', 30, 200, 100, 400, 150, 250],
  66. ['data2', 50, 20, 10, 40, 15, 25]
  67. ],
  68. selection: {
  69. enabled: true,
  70. grouped: true,
  71. multiple: false,
  72. }
  73. }
  74. });
  75. var chart21 = c3.generate({
  76. bindto: '#chart2-1',
  77. data: {
  78. columns: [
  79. ['data1', 30, 200, 100, 400, 150, 250],
  80. ['data2', 50, 20, 10, 40, 15, 25]
  81. ],
  82. selection: {
  83. enabled: true,
  84. grouped: true,
  85. multiple: false,
  86. }
  87. },
  88. tooltip: {
  89. grouped: false
  90. }
  91. });
  92. var chart3 = c3.generate({
  93. bindto: '#chart3',
  94. data: {
  95. columns: [
  96. ['data1', 30, 200, 100, 400, 150, 250],
  97. ['data2', 50, 20, 10, 40, 15, 25]
  98. ],
  99. selection: {
  100. enabled: true,
  101. grouped: false,
  102. multiple: true,
  103. }
  104. }
  105. });
  106. var chart31 = c3.generate({
  107. bindto: '#chart3-1',
  108. data: {
  109. columns: [
  110. ['data1', 30, 200, 100, 400, 150, 250],
  111. ['data2', 50, 20, 10, 40, 15, 25]
  112. ],
  113. selection: {
  114. enabled: true,
  115. grouped: false,
  116. multiple: true,
  117. }
  118. },
  119. tooltip: {
  120. grouped: false
  121. }
  122. });
  123. var chart4 = c3.generate({
  124. bindto: '#chart4',
  125. data: {
  126. columns: [
  127. ['data1', 30, 200, 100, 400, 150, 250],
  128. ['data2', 50, 20, 10, 40, 15, 25]
  129. ],
  130. selection: {
  131. enabled: true,
  132. grouped: false,
  133. multiple: false,
  134. }
  135. }
  136. });
  137. var chart41 = c3.generate({
  138. bindto: '#chart4-1',
  139. data: {
  140. columns: [
  141. ['data1', 30, 200, 100, 400, 150, 250],
  142. ['data2', 50, 20, 10, 40, 15, 25]
  143. ],
  144. selection: {
  145. enabled: true,
  146. grouped: false,
  147. multiple: false,
  148. }
  149. },
  150. tooltip: {
  151. grouped: false
  152. }
  153. });
  154. </script>
  155. </body>
  156. </html>